Ext開發代碼片段蒐集

1.  表格數據加載後默認選中第一條

   可以在表格的render 添加如下監聽事件

  listeners : { 'render':function(){ var _grid = Ext.getCmp('GridId'); _grid.store.load(); _grid.getSelectionModel().selectFirstRow(); // _grid.getSelectionModel().selectRow(0); } }

2.  表格單元設置連接方式之一

  function showUrl(value){ return "<a href="http://"+value+"" mce_href="http://"+value+"" target=_blank'>"+value+"</a>"; }

3.  Grid下方分頁組件的分頁數combox控制

 

bbar: new Ext.PagingToolbar({ pageSize: 8, store: CRMDisBaseInfoStore, displayInfo: true, displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', emptyMsg: "沒有記錄",items:[G_P_paging()] }) var G_P_paging = function(){ return new Ext.form.ComboBox({ store: [['5','5'],['10','10'],['50','50'],['100','100']], emptyText: '請選擇', width:80, mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', readOnly:true, listeners:{ select:function(_combo , _record , _index){ var _b=_combo.findParentByType('paging'); var paging_value =_combo.getValue(); if(paging_value==""){ _b.pageSize=10; _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:10}}); }else{ _b.pageSize=paging_value; _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:paging_value}}); } _combo["selectItem"] = _record ; } } }) }

 

4. grid 的store操作常用代碼

 

firstGrid.on({ 'rowdblclick' : function() { var m = firstGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { secondGrid.getStore().add(m[i]); firstGrid.getStore().remove(m[i]); } } }); secondGrid.on({ 'rowdblclick' : function() { var m = secondGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { firstGrid.getStore().add(m[i]); secondGrid.getStore().remove(m[i]); } } }); //將選中的行到右邊 function toRight() { var m = firstGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { secondGrid.getStore().add(m[i]); firstGrid.getStore().remove(m[i]); } } //將選中的行到左邊 function toLeft() { var m = secondGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { firstGrid.getStore().add(m[i]); secondGrid.getStore().remove(m[i]); } } //左邊選中的數據全部到右邊 function toAllRight() { firstGrid.getSelectionModel().selectAll(); var num = firstGrid.getStore().getCount(); var m = firstGrid.getSelectionModel().getSelections(); firstGrid.getStore().removeAll(); for (var i = 0; i < num; i++) { secondGrid.getStore().add(m[i]); } } //右邊選中的數據全部到左邊 function toAllLeft() { secondGrid.getSelectionModel().selectAll(); var num = secondGrid.getStore().getCount(); var m = secondGrid.getSelectionModel().getSelections(); secondGrid.getStore().removeAll(); for (var i = 0; i < num; i++) { firstGrid.getStore().add(m[i]); } } function removeRight() { secondGrid.getStore().removeAll(); firstGrid.getStore().reload(); }

 

5. EXtJs界面開發中遇到的問題

   頁面報錯:未結束的字符串常量

   可能原因js文件出現了中文亂碼問題，可以在如下引入js文件
   <script type="text/javascript" src="../../extJs-lib/scripts/ext/ext-lang-zh_CN.js"    charset="utf-8">

  視圖界面展示報錯: events 爲空
   代碼段某個組件最後一個配置參數多了一個逗號

  組件設置了滾動條配置參數，但界面展示未能出現滾動條
    需要在對相應組件設置高度

  在form裏面不能顯示textfield等組件的標籤
    需要把相應組件的佈局設置爲form

  佈局中均勻拉伸效果

   保證上層組件佈局爲border,下層組件配置 anchor屬性即可實現。

   Ext彈出框口讓其他處於最前面：modal:true

 

6.Ext grid中得到選擇行的方法 

 在Ext grid中假設有一個名稱爲grid的對象。

(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行

(2)grid.getSelectionModel().getSelections()//得到選擇所有行

(3)grid.selModel.selections.items;//得到選擇所有行

(4)grid.getSelectionModel().getSelected();//得到選擇行的第一行

 

7. ExtJS如何給textfield賦值的三個方法：

var value="值";

(1) fs.form.findField(id/name).setValue(value);

(2) Ext.get(id/name).setValue(value);

(3) Ext.getCmp(id).setValue(value);

取值方法類似，只需改寫名稱set爲get即可

 

8.  extjs控制組件樣式代碼

 

        {
               text : '查詢',
               id:'query_id',
               iconCls:'icon_query'
         }

icon_query即爲css文件裏定義的樣式名稱。

 

9.  渲染函數的語法

 

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){   

 

}    

value 是當前單元格的值   

cellmeta  裏保存的是cellId單元格id，id不知道是幹啥的，似乎是列號，css是這個單元格的css樣式。   

record 是這行的所有數據，你想要什麼，record.data["id"]這樣就獲得了。   

rowIndex  是行號，不是從頭往下數的意思，而是計算了分頁以後的結果。   

columnIndex  列號太簡單了。   

      Store這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格裏所有的數據，你都可以隨便調用 

      開發中用到第一個參數較多。簡略形式爲

renderer:function(value){  

}