GridPanel表格的创建

学习来源：　　　　http://www.cnblogs.com/youring2/p/3998761.html

　　　　　　　　　http://blog.csdn.net/huitiaowudeyu/article/details/44455937

　　　　　　　　　http://blog.csdn.net/hanhan313/article/details/8150879

GridPanel是ExtJS提供的功能强大的表格。

要创建一个用于显示后台数据的数据表格，显然要有：表格信息，数据源

表格信息对应于Model，用于设置表格每一列所代表的属性。

数据源对应于Store，用于向表格中填充数据。

//1.定义Model
Ext.define("MyApp.model.User", {
    extend: "Ext.data.Model",
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' }
    ]
});

//2.创建store
var store = Ext.create("Ext.data.Store", {
    model: "MyApp.model.User",
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "GridHandler.ashx",
        reader: {
            root: "rows"
        }
    }
});

//3.创建gridPanel
var grid = Ext.create("Ext.grid.Panel", {
    xtype: "grid",
    store: store,
    width: 500,
    height: 200,
    margin: 30,
    columnLines: true,
    renderTo: Ext.getBody(),
    selModel: {
        injectCheckbox: 0,
        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        checkOnly: true     //只能通过checkbox选择
    },
    selType: "checkboxmodel",
    columns: [
        { text: '姓名', dataIndex: 'name' },
        {
            text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
            editor: {
                xtype: "numberfield",
                decimalPrecision: 0,
                selectOnFocus: true
            }
        },
        { text: '电话', dataIndex: 'phone', editor: "textfield" }
    ],
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    listeners: {
        itemdblclick: function (me, record, item, index, e, eOpts) {
            //双击事件的操作
        }
    },
    bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
});

listeners用于设置监听。

 

具体来讲：

1. Ext.data.store

Store：该类封装了一个客户端缓存，用于存储 Model 对象。Store通过一个代理 Proxy 来加载数据，并提供函数来 排序 、过滤 以及查询 内部所包含的 model 实例。

创建Store非常简单：只需要传入 Model 以及用来 加载/保存 数据的Proxy作为配置项即可：

// 建立一个store要使用的 model  
Ext.define('User', {  
    extend: 'Ext.data.Model',  
    fields: [  
        {name: 'firstName', type: 'string'},  
        {name: 'lastName',  type: 'string'},  
        {name: 'age',       type: 'int'},  
        {name: 'eyeColor',  type: 'string'}  
    ]  
});  

//建立store  
var myStore = Ext.create('Ext.data.Store', {  
    model: 'User',  
    proxy: {  
        type: 'ajax',  
        url: '/users.json',  
        reader: {  
            type: 'json',  
            root: 'users'  
        }  
    },  
    autoLoad: true  
});

 其中 proxy 项，我在工作中遇到的写法是这样的：

ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({url: 'idcBusinessConfig!getResourceLists.html?productId='+productId, method: 'GET'}),
                reader: new Ext.data.JsonReader({root: "rows"}, dataEntity)
            });

这里 proxy 主要用来获取数据。