目錄
(1)箭頭樣式
(2)treenode 自定義樣式
(3)Ext.tree.TreePanel 的title,root 配置項必須指定,不然圖像在IE中顯示混亂; loader配置項不指定,不顯示圖像. 
(4)Extjs 日期的使用方法(顯示,接收,定義,提交)
(5)Extjs 三個主要文件錯誤的引用, 瀏覽器無法顯示Extjs效果.
(6)gridpanel加態重新加載columnModel和store
(7)tabpanel判斷tab頁在不在
(8)panel動態加載tbar(可擴展進行延伸控制任何DIV)
(9)Extjs 擴展繼承子類(Ext.extend())
(10)Ext.data.Record 類 引用和賦值問題
(11)Ext.apply 無法復制 Ext.data.JsonStore 等數據源相關的類型
(12)TabPanel子窗口(如Ext.Panel等)隱藏屬性closable
(13)Panel 的 tools 配置項
(14)Extjs 首頁 "load..." 制作方法
(15)Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion'
(16)Ext.grid.GridPanel 的columns屬性和Ext.data.Store的fields屬性均可為數組
(17)使用XTemplate動態加載panel等組件內容




(1)箭頭樣式
 new Ext.tree.TreePanel({
         useArrows : true,//是否使用箭頭樣式


         loader : new Ext.tree.TreeLoader({ url : "tree-data.json"}),
         root : new Ext.tree.AsyncTreeNode()

(2)treenode 自定義樣式
json:
[{
    text:'Basic Ext Layouts',
    expanded: true,
    children:[{
        text:'Absolute', //也可以使用HTML標簽
        id:'absolute',
        //icon:....   //自定義圖標
        cls:"tem",   //<link rel="stylesheet" href="css/tem.css" type="text/css"></link>
        leaf:true

(3)Ext.tree.TreePanel 的title,root 配置項必須指定,不然圖像在IE中顯示混亂; loader配置項不指定,不顯示圖像. 

    三個必須項:  title,root ,loader
new Ext.tree.TreePanel({
           rootVisible : false,
           useArrows : true,// 是否使用箭頭樣式
           loader : new Ext.tree.TreeLoader({
              url : "tree-data.json"
             }),
           title : "tool1",
           root : new Ext.tree.AsyncTreeNode()
          }), {
         title : "tool2"

(4)Extjs 日期的使用方法(顯示,接收,定義,提交)

http://www.tkk7.com/algz/articles/270359.html

(5)Extjs 三個主要文件錯誤的引用, 瀏覽器無法顯示Extjs效果.

 正確:  <script type="text/javascript" src="script/ext/ext-all.js"></script>
 錯誤:  <script type="text/javascript" src="/script/ext/ext-all.js"></script>
            <script type="text/javascript" src="../script/ext/ext-all.js"></script>

(6)gridpanel加態重新加載columnModel和store
//重新綁定grid
this.grid.reconfigure(newStore, new Ext.grid.ColumnModel(cm1));
//重新綁定分頁工具欄
this.pagingBar.bind(newStore);
//重新加載數據集
newStore.load({params:{start:0,limit:10}});


(7)tabpanel判斷tab頁在不在
           var tem=tabpanel.getItem("tabpage"); //判斷tab頁在不在.
            if(tem)
            Ext.Msg.alert("ok");
            else
            Ext.Msg.alert("not");

(8)panel動態加載tbar(可擴展進行延伸控制任何DIV)
var pan=new Ext.Panel({tbar:new Ext.Toolbar({})....); //定義空對象容易在PANEL加載時沒加載tbar，所以會出現沒有高度或隱藏起來
var t=new Ext.Toolbar({...});
document.getElementById(pan.tbar.id).innerHTML = ""; //清空panel.tbar下的所有內容
t.render(pan.tbar); //toolpanel顯示到panel.tbar(div)下

(9)Extjs 擴展繼承子類(Ext.extend())
var subclass=Ext.extend(XX,{   //繼承Extjs類,可覆蓋或添加其子類的屬性或方法
xx:...,
xx:...
});
var tem=new subclass({});

(10)Ext.data.Record 類 引用和賦值問題
var record=new Ext.data.Record({});
......
store.insert(0,record);  //record值勤改變.store中的值也改變.
store.insert(0,record.copy);  //record值改變,store中的值不變.record.copy()復制返回另一個記錄.

(11)Ext.apply 無法復制 Ext.data.JsonStore 等數據源相關的類型
var store2 = new Ext.data.JsonStore({});
var store3={};
Ext.apply(store2,magazine_store); //效果無用.store2仍引用magazine_store,無法獨立使用.
Ext.apply(store3,magazine_store); //效果同上.
store3=Ext.apply(store2,magazine_store); //效果同上.

(12)TabPanel子窗口(如Ext.Panel等)隱藏屬性closable
TabPanel子窗口(如Ext.Panel,Ext.grid.GridPanel等)隱藏屬性closable:true/false //顯示/隱藏子窗口右上角的關閉按鈕
注:此屬性只有TabPanel子窗口才有效.

(13)Panel 的 tools 配置項
new Ext.Panel({...
tools:[{
    id:'refresh',  //必選項
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){     //必須項
        // refresh logic
    }
}]
...})
API詳見:  http://www.tkk7.com/algz/articles/277819.html

(14)Extjs 首頁 "load..." 制作方法
http://www.tkk7.com/algz/articles/277844.html

(15)Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion'
http://www.tkk7.com/algz/articles/278217.html

(16)Ext.grid.GridPanel 的columns屬性和Ext.data.Store的fields屬性均可為數組
columns:cm    //cm=[....{...}...]    cm=new Ext.Ext.grid.ColumnModel([...])
fields:f            //f=[...]  f=new Ext.data.Record.create([...])

(17)使用XTemplate動態加載panel等組件內容
//可以采用異步遠程取值
var board_data = {
 title : "title",
 content : ""
};
//可以是任意組件
    var board_w = new Ext.Window({
       id : "board_w",
       title : "公告",
       modal : true,
             });
    // 以下方法 Ext.fly("board_w");Ext.get("board_w")都錯
    tpl.overwrite(Ext.getCmp("board_w").body, data);// 更新公告內容