1. 查詢(SELECT)

1.1 創(chuàng)建store

var _store = Ext.create('Ext.data.ArrayStore', {
    model: 'User',          // grid綁定的模型
    pageSize: PAGESIZE,     // 設(shè)置分頁(yè)尺寸
    remoteSort: true,       // 設(shè)置允許遠(yuǎn)程(接口)排序
    remoteFilter: true,     // 設(shè)置允許遠(yuǎn)程(接口)搜索
    noCache: true,
    autoLoad: false,
    proxy: {
        type: 'ajax',   
        url: URL,
        // 自定義參數(shù)名稱(替換默認(rèn)參數(shù)：start、limit、page)
        startParam: 'start',  
        limitParam: 'number',
        pageParam: 'page',
        // 接口回調(diào)處理
        reader: {
            type: 'json',            // 返回?cái)?shù)據(jù)類型
            root: 'data',            // 返回?cái)?shù)據(jù)：元數(shù)據(jù)
            totalProperty: 'count'   // 返回?cái)?shù)據(jù)：總數(shù)據(jù)數(shù)
        }
    }
});

1.2 配置列

{
    text: '編號(hào)',      // 列名稱
    dataIndex: 'id',   // 綁定的字段捂齐，和 Model 保持一致
    flex: 1,           // 列寬(百分比)
    sortable: true,    // 是否允許排序
    align: 'center',   // 對(duì)齊方式
    // 渲染頁(yè)面時(shí)丛晌，對(duì)數(shù)據(jù)進(jìn)行預(yù)處理
    renderer: function (value, p, td) {
        return value % 2 == 0 ? value + " ==> even" : value + " ==> odd";
    }
},

1.3 分頁(yè)

// 分頁(yè)功能
bbar: Ext.create('Ext.PagingToolbar', {
    store: _store,
    // 標(biāo)識(shí)是否顯示分頁(yè)bar右下角的displayMsg信息
    displayInfo: true,
    // 有數(shù)據(jù)時(shí)：顯示在分頁(yè)bar右下角
    displayMsg: '顯示 {0} - {1} 條镜廉，共計(jì) {2} 條',
    // 無(wú)數(shù)據(jù)時(shí)：顯示在分頁(yè)bar右下角
    emptyMsg: "沒(méi)有數(shù)據(jù)"
}

1.4 grid選中行

getSelectedRows = function() {
    rows = grid.getSelectionModel().getSelection();
}

1.5 監(jiān)聽grid行點(diǎn)擊事件(單擊签餐、雙擊)

注意：當(dāng)同時(shí)監(jiān)聽單擊和雙擊事件時(shí)寓涨，只會(huì)響應(yīng)單擊事件！

listeners: {
    cellclick: function (v, p, n) {
        console.log('單擊');
        var row = getSelectedRows();
        var id = rows[0].get("id");      // 取出id列的值
    },
    celldblclick: function (v, p, n) {
        console.log('雙擊');
        var row = getSelectedRows();
        var name = rows[0].get("name");  // 取出name列的值
    }
}

1.6 grid中顯示CheckBox(復(fù)選框)

selType: 'checkboxmodel'

1.7 排序

• 設(shè)置本地排序 | 遠(yuǎn)程(接口)排序
  • e.g. remoteSort: true
• 每次只能根據(jù)單列排序
  • e.g. sort:[{"property":"dept","direction":"ASC"}])

1.8 搜索

// 搜索
function search() {
    var id = $("#txt_Id").val();
    var name = $("#txt_Name").val();
    _store.load({
         params: {
             start: 0,
             limit: PAGESIZE,
             // 這里要傳入json字符串氯檐，否則傳參異常
             query:'{"id": id, "name": name}'
         }
    });
}

1.9 示例

ExtJS-列表顯示@2x.png

2. 未完待續(xù)戒良。。冠摄。