TabPanel、TreePanel、GridPanel幾種佈局方式常見的小問題

TabPanel

1、當tab標籤超過一定瀏覽器的寬度時，使之自動加載滾動條autoScroll:true;

設置滾動條爲自動，此前若需要看到效果必須要設置enableTabScroll屬性爲真

2、添加右鍵菜單：

      使用extjs的右鍵組件TabCloseMenu

{
                xtype:'tabpanel',
                id:'tabs',
                autoScroll:true,
                region:'center', // a center region is ALWAYS required for border layout
                deferredRender:false,
                activeTab:0, // first tab initially active
                items:centPortal,
                plugins:new Ext.ux.TabCloseMenu({
                    closeTabText:'關閉當前標籤',
                    closeOtherTabsText:'關閉其他標籤',
                    closeAllTabsText:'關閉所有標籤'
                })
}

 

3、從iframe中操作父界面

      3.1、如果是得到，則直接使用parent.Ext.getCmp()；或者是parent.變量名

      3.2、如果是添加一個組件到父容器，則需要在新建 new parent.Ext.panel();

 

GridPanel

1、本地數據分頁

2、後臺交互分頁

//數據顯示的表格
      var tabs = new Ext.grid.GridPanel({
          region:'center',
          title:'學生信息列表',
          width:750,
          height:400,
          margins:{top:5,right:0,bottom:0,left:50},
          cm:cm,
          store:store,
          bbar: new Ext.PagingToolbar({
              pageSize:15,
              store:store,
              displayInfo:true,
              displayMsg:'顯示第{0}條到第{1}條記錄，總共有{2}條記錄',
              emptyMsg:'當前還沒有記錄'
          }),
          sm:sm
      });
      store.load({params:{start:0,limit:15}});
//這裏的start，和limit就是用來分頁的兩個參數

3、gridpanel中對前臺數據格式轉換（渲染）：

 3.1、在列模型中轉換數據格式（不會改變store中實際值）

   renderer的配置參數有：value, metaData, record, rowIndex, colIndex, store

//一般情況下的渲染，用於根據類型判斷顯示文字信息
{header :'日誌類型',dataIndex:'userLogType',width:150,renderer:function(value){
                    return value==1?'系統日誌':'用戶日誌'
                }}

//這個渲染是會在鼠標滑過單元格時，彈出提示框顯示該單元格信息
renderer:function(){
                return '<div ext:qtip='+val+'></div>';
            }

//主要用於該列的自動換行顯示
renderer:function (v, meta) {
   meta.attr = 'style="white-space:normal;"';
   return v;
}
     

 3.2、在store中轉換數據格式（改變了store中的值）

{name: 'rating', type: 'int', convert: function(v, rec) {
                   if (rec[3] < 0) return 2;
                   if (rec[3] < 1) return 1;
                   return 0;
               }
            }

  

 3.3、在gridpanel中渲染該函數，用來鼠標指定的列顯示縮略圖

function thumbnail(data, metadata, record, rowIndex, columnIndex, store) {
        var url = store.getAt(rowIndex).get('filePath');
       //var fileName = store.getAt(rowIndex).get('fileName');
        //qtitle標題 qtip:內容
        var img = "<img src='<%=WebConfig.WEB_DOWNLOAD%>/" + url + "' width='100%' >";
        var displayText = '<div ext:qtitle="圖片信息" ext:qtip="' + img + '" >' + data + '</div>';
        return displayText;
    }

 

4、在後臺排序

當使用後臺排序時，需要注意的是使用的請求方式需要時proxy形式而不是url的形式，然後開啓remoteSort爲true，此時如果gridpanel中的該列允許排序的話，後臺就會接收到相應的排序參數，分別爲sort、dir

 

treePanel

1、樹節點的attributes屬性

ext的treePanel中有一個attributes屬性，他是一個包含後臺賦予的值的對象，後臺的必須參數有Id（表示該節點）、text（節點名稱）

注意：後如果想要從後臺傳遞其他參數給這個樹節點，那麼只需呀附加Id、text之外的鍵值對即可，不需要將該鍵值對再次封裝在attributes屬性中

2、生成一棵樹

function newTree(rVisible)
    {
        var tree = new Ext.tree.TreePanel({
            animate:true,//是否有動畫效果
            useArrows:false,//是否有下三角
            lines:false,//是否顯示樹的那根線
            autoScroll:true,
            rootVisible: rVisible,//是否顯示樹的根節點（當樹的值是後臺傳過來的時候，系統會自動加載一個根節點，然後將闖過來的數據作爲子節點載入）
            loader: new Ext.tree.TreeLoader(),//樹的節點的加載器，用來自動組裝一棵樹，等價於：dataUrl:'**.**'
            root:new Ext.tree.AsyncTreeNode(),//樹的根節點
            containerScroll: true,//爲樹加載滾動條
            enableDD:true,//設置樹是否可以拖拽，默認爲false
            border: false,
            width: 250,
            height: 300,
            enableDD:true,
            listeners: {    //樹的監聽器，監聽當樹的節點的選項改變時觸發
                'render': function(tp){
                    tp.getSelectionModel().on('selectionchange', function(tree, node){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
                        }
                    })}
            }
listeners: {    //監聽樹節點的單擊事件
                'render': function(tp){
                    tp.on(click, function(node,e){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
                        }
                    })}
            }
        })
 
        return tree;
    }

 

3、根據後臺傳的值構建一棵樹

        tree.getLoader().dataUrl = '  ';

//取值的url，傳過來的值是一個json對象的數組[{id:'1',text:'a',leaf:true},{id:'2',text:'b',children:[{text:'2.1',leaf:true}]}]

        或者在構建樹的時候，直接指定屬性dataUrl

        tree.root.reload();//刷新樹結構

4、前臺確定一棵樹

var entTree = newTree(true);
    var entBase = new Ext.tree.AsyncTreeNode({
        text:'企業基本信息',
        draggable:false,
        id:'entBase',
        children:[{
            text:'企業基本信息',
            iconCls:'nav',
            draggable:false,
            id:'entMsg',
            leaf:true
        },{
            text:'企業規章制度',
            iconCls:'nav',
            draggable:false,
            id:'entRule',
            leaf:true
        }]
    })
    entTree.setRootNode(entBase);//設置樹的根節點
    entTree.expand(true,true);//設置樹是否展開、是否有動態效果

 5、樹的右鍵菜單配置方式

contextMenu:new Ext.menu.Menu({
            items:[
                {
                    id:'refresh-node',
                    text:'刷新',
                    iconCls:'silk-table-refresh'
                },
                {
                    id:'show-node',
                    text:'查看詳情',
                    iconCls:'silk-table-go'
                },
                {
                    id:'add-node',
                    text:'新增信息',
                    iconCls:'silk-table-row-insert'
                },
                {
                    id:'edit-node',
                    text:'修改信息',
                    iconCls:'silk-table-edit'
                },
                {
                    id:'delete-node',
                    text:'刪除信息',
                    iconCls:'silk-table-row-delete'
                }
            ],
            listeners:{
                itemclick:function (item) {
                    switch (item.id) {
                        case 'refresh-node':
                            refresh();
                            break;
                        case 'show-node':
                            show(this);
                            break;
                        case 'add-node':
                            add(this);
                            break;
                        case 'edit-node':
                            edit(this);
                            break;
                        case 'delete-node':
                            del();
                            break;
                    }
                }
            }
        })
寫完右鍵菜單後，還要在樹的監聽器裏設置
contextmenu:function (node, e) {
                node.select();
                var c = node.getOwnerTree().contextMenu;
                c.showAt(e.getXY());//設置座標
            }