extjs模板循環的簡單介紹

本文目錄一覽：

• 1、如何銷毀extjs窗體？
• 2、extjs的card布局中使用XTemplate模板填充item的問題
• 3、Extjs如何動態加載Extjs腳本
• 4、extJS4.0 我在for循環里執行submit 為什麼循環完了以後才會執行？ 不能循環一次執行一次.
• 5、extjs里的Ext.each可以中途退出嗎?
• 6、Extjs 2.0 如何動態的添加checkBox

如何銷毀extjs窗體？

配置closeAction: ‘close’ 屬性

API中這樣講：

closeAction : String

當關閉按鈕被點擊時執行的操作。 默認的操作是’close’，這將把窗口從DOM中移除…

當關閉按鈕被點擊時執行的操作。 默認的操作是’close’，這將把窗口從DOM中移除並摧毀它。 另一個合法的選項是’hide’，這將簡單地隱藏窗口，通過 設置它的visibility為hidden，並且設置一個負數偏移量。 通過 show 方法可以讓窗口重新顯示。

1、觸發 beforedestroy  

這是一個可取消的事件，如果需要，可能通過提供事件代理來阻止組件被銷毀。 

2、調用 beforeDestroy 方法 

又一個模板方法，在子類中可以重新實現和調用父類的方法。 

3、移除事件監聽者（代理）

如果組件已被呈現，則移除它底層的 HTML 元素的事件監聽列表，然後將元素從 DOM中移除。

4、onDestroy 被調用

這個還是一個模板方法，在子類可以重新實現。這裡需要注意的是，容器類提供了一個默認的 onDestroy 實現，它會循環銷毀它的成員組。

5、組件實例從 ComponentMgr 中反註冊

不可以再通過 Ext.getCmp 獲取到對象實例。

6、destroy 事件被觸發

這只是一個簡單的提醒，表示組件銷毀成功。

7、移除 Component 上的事件代理

組件可以獨立於元素，自己擁有事件代理，如果存在則移除它們。

extjs的card布局中使用XTemplate模板填充item的問題

本質原因是變量_pageFile是在render事件觸發後，才調用事件函數然後去獲取這個參數，而這個參數最後的結果是數據的最後一個值，修改代碼如下：

//..

listeners : {

                ‘render’ : function(panel){

                    console.log(this);

                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);

                }

            },

            scope : this,

            pageFile : _pageFile

//..

完整的例子：

var curIndex = 1;

    var navHandler = function(){

         if(curIndex == 2) {

         curIndex  = 0

        }

   card.getLayout().setActiveItem(curIndex);

    curIndex ++;

};

    var card = new Ext.Panel({

    title: ‘嚮導的演示 Example Wizard’,

    layout:’card’,

    activeItem: 0,

    bodyStyle: ‘padding:15px’,

    defaults: {

       // 每個子組件都有效 applied to each contained panel

        border:false

    },

    // 簡單的導航按鈕，可以擴展更多 just an example of one possible navigation scheme, using buttons

    bbar: [

        {

            id: ‘move-prev’,

            text: ‘後退’,

            text: ‘Back’,

            handler: navHandler.createDelegate(this, [-1]),

            disabled: true

        },

        ‘-‘,

        {

            id: ‘move-next’,

            text: ‘前進 Next’,

            handler: navHandler.createDelegate(this, [1])

        }

    ],

    // 內面的面板，就是「卡片」 the panels (or “cards”) within the layout

    items: []

});

    var dataFile = [

            {

                pageFile : [

                    {

                        spec : 1,

                        pic : 11,

                        ranged : 111

                    }

                ]

            },

            {

                pageFile : [

                    {

                        spec : 2,

                        pic : 22,

                        ranged : 222

                    }

                ]

            }

    ];

    var _pageFile;

    for (var i = 0; i dataFile.length; i++) {

        _pageFile = dataFile[i];

        //_pageFile =

        card.add({

            id: ‘card-‘ + (i + 1),

            tpl : new Ext.XTemplate(

                ‘table border=”1″‘,

                ‘trtd規格/tdtd圖片/tdtd對白/td/tr’,

                ‘tpl for=”pageFile”‘,

                ‘trtd{spec}/tdtd{pic}-{ranged}/tdtd{dialogue}-{ranged}/td/tr’,

                ‘/tpl’,

                ‘/table’

            ),

            listeners : {

                ‘render’ : function(panel){

                    console.log(this);

                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);

                }

            },

            scope : this,

            pageFile : _pageFile

        });

    }

    card.render(document.body)

Extjs如何動態加載Extjs腳本

1、首先，需要先創建一個基本可用的 ExtJS 模板， 這個很簡單， 如下所示：

!DOCTYPE html

html

head

title/title

link rel=”stylesheet” type=”text/css” href=”” /

script type=”text/javascript” src=””/script

/head

body

/body

/html

2、需要引用的腳本是 ExtJS 根目錄下的 ext-debug.js ， 不是 ext-all-debug.js， 這個文件非常小， 只有幾百K ， 當讓這個只是最基本的 ExtJS 組件， 不包括任何的界面功能。

3、配置 Ext.Loader 啟用動態加載；

4、ExtJS 中的動態加載是由 Ext.Loader 來完成的， 默認不啟用動態加載， 所以接下來需要做的事配置 Ext.Loader 啟用動態加載， 在上面模板的 body 標籤內添加如下代碼：

script type=”text/javascript”

Ext.onReady(function() {

Ext.Loader.setConfig({

enabled : true,

disableCaching: false,

paths : {

Ext : ‘/ext-4/src’

}

});

});

/script

注意：上面的代碼啟用了動態加載， 禁用了瀏覽器緩存， 以及指定了 ExtJS 的所部署的路徑。

extJS4.0 我在for循環里執行submit 為什麼循環完了以後才會執行？ 不能循環一次執行一次.

這樣是不行的，submit提交是需要時間的返回，for循環不會等他的。不然如果提交的頁面一直沒返回結果，程序豈不是就卡住在這邊了。

extjs里的Ext.each可以中途退出嗎?

Ext.each(

function(value)

{

if(value == ‘2’){

return false

}

},this);

each方法是遍歷循環，你需要加一個自定義方法

這個方法每個元素都會執行一遍

你可以在方法中添加一個判斷語句，

當返回false的時候終止跳出遍歷循環

Extjs 2.0 如何動態的添加checkBox

兩種辦法:

1:

從後台查出的權限，拼成字符串

，「，」分開，request.setArribute(『’)那個字符串

在前台拿到

用變量接受，將之轉化成數組

循環數組，每次循環的時候，創建一個checkBox，ok

了，其實應該用checkboxgroup

這樣只要創建boxlabel

就行了

以上做法

不好的地方是

只能在jsp中取得request中的屬性，不能再js中即時的拿到

2:創建一個checkbox

類

裏面的屬性就是你checkbox想要設置的屬性，然後從後台查出的權限，每個權限new出一個checkbox類，這樣就得到一個checkbox的list

將之轉化為json串

寫到前台，前台接受並且解析出一個數組，循環數組，如的到得數組

powers

for(var

i=0;ipowers.length;i++){

Ext.getCmp(‘form’).add(powers[i]);

}

就可以了

不知樓主懂沒懂。。。。

加上布啊局的話就自己想辦法了，將上面的例子簡單修改皆可以

當然也可以不創建類，直接把權限拼成一個字符串，然後再前台接受並解析，轉化成數組

循環數組

for(var

i=0;ipowers.length;i++){

Ext.getCmp(‘form’).add(new

Ext.Checkbox({}));

}

Checkbox裏面的設置

就不用我所了吧

我這裡沒有代碼

忘記了Ext.Checkbox有沒有了

反正是這個意思，勿要吹毛求疵

，希望對你有幫助