ExtJS学习笔记

1. 查询(SELECT)

1.1 创建store

var _store = Ext.create('Ext.data.ArrayStore', {
    model: 'User',          // grid绑定的模型
    pageSize: PAGESIZE,     // 设置分页尺寸
    remoteSort: true,       // 设置允许远程(接口)排序
    remoteFilter: true,     // 设置允许远程(接口)搜索
    noCache: true,
    autoLoad: false,
    proxy: {
        type: 'ajax',   
        url: URL,
        // 自定义参数名称(替换默认参数：start、limit、page)
        startParam: 'start',  
        limitParam: 'number',
        pageParam: 'page',
        // 接口回调处理
        reader: {
            type: 'json',            // 返回数据类型
            root: 'data',            // 返回数据：元数据
            totalProperty: 'count'   // 返回数据：总数据数
        }
    }
});

1.2 配置列

{
    text: '编号',      // 列名称
    dataIndex: 'id',   // 绑定的字段，和 Model 保持一致
    flex: 1,           // 列宽(百分比)
    sortable: true,    // 是否允许排序
    align: 'center',   // 对齐方式
    // 渲染页面时，对数据进行预处理
    renderer: function (value, p, td) {
        return value % 2 == 0 ? value + " ==> even" : value + " ==> odd";
    }
},

1.3 分页

// 分页功能
bbar: Ext.create('Ext.PagingToolbar', {
    store: _store,
    // 标识是否显示分页bar右下角的displayMsg信息
    displayInfo: true,
    // 有数据时：显示在分页bar右下角
    displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
    // 无数据时：显示在分页bar右下角
    emptyMsg: "没有数据"
}

1.4 grid选中行

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

1.5 监听grid行点击事件(单击、双击)

注意：当同时监听单击和双击事件时，只会响应单击事件！

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(复选框)

selType: 'checkboxmodel'

1.7 排序

• 设置本地排序 | 远程(接口)排序
  • e.g. remoteSort: true
• 每次只能根据单列排序
  • 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. 未完待续。。。