ExtJS中表格控件的使用，属性设置和数据的获取(copyfrom:http://www.itzhai.com/extjs-form-controls-in-the-use-of-property-)

ExtJS中表格的特性简介

表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid
表格的列信息由Ext.grid.ColumnModel定义
表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：

JsonStore，SimpleStore，GroupingStore…

一个表格的基本编写过程：

1、创建表格列模型

var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role'},{header: '等级', dataIndex: 'grade'},{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}  //创建日期类型的数据});

2、创建数据数组

var data = [    ['士兵','7','2011-07-2412:34:56'],    ['将军','10','2011-07-2412:34:56'],];

3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式

ArrayReader的mapping用来设置列的排列顺序

var store = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [        {name: 'role', mapping: 1},        {name: 'grade', mapping: 0}        {name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'}  //创建日期列和显示格式    ])});store.load();

4、创建GridPanel，装配ColumnModel和store

var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cm});

另外获取远程数据可以使用ScriptTagProxy,如下所示

var store = new Ext.data.Store({    proxy: new Ext.data.ScriptTagProxy({    url:'http://...'}),    reader: new Ext.data.ArrayReader({}, [        {name: 'role', mapping: 1},        {name: 'grade', mapping: 0}    ]),    sortInfo: {field: "role", direction: "ASC"}  //设置默认排序列，ASC/DESC});

表格的常用属性功能

var grid = new Ext.grid.GridPanel({enableColumnMove: false, //禁止拖放列enableColumnResize: false,  //禁止改变列的宽度stripeRows: true,  //斑马线效果loadMask: true,  //读取数据时的遮罩和提示功能renderTo: 'grid',store: storecm: cm});var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role', width:90, sortable: true},  //width设置列宽度，默认为100px，sortable设置排序功能{id:'grade', header: '等级', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cmviewConfig:{   //让每列自动填充满表格forceFit: true}autoExpandColumn: 'grade'  //自动延伸列，列的id在ColumnModel中定义});

渲染表格，为表格设置特殊样式

只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。

function renderSex(value) {    if (value == 'male') {        return "<span style='color:blue;'>男</span><img src='images/icon_male.png' />";    } else {        return "<span style='color:red;'>女</span><img src='images/icon_female.png' />";    }}var cm = new Ext.grid.ColumnModel([    {header:'id',dataIndex:'id'},    {header:'name',dataIndex:'name'},    {header:'sex',dataIndex:'sex',renderer:renderSex},]);var data = [    ['1','Jason','male'],    ['2','Kate','female']];var store = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [        {name: 'id'},        {name: 'name'},        {name: 'sex'}    ])});store.load();var grid = new Ext.grid.GridPanel({    autoHeight: true,    renderTo: 'grid',    store: store,    cm: cm});

自动显示行号，只要在创建cm时创建一个RowNumberer就可以了

var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),   //显示行号    {header:'id',dataIndex:'id'},    {header:'name',dataIndex:'name'},    {header:'sex',dataIndex:'sex',renderer:renderSex},]);

删除列

store.remove(store.getAt(i));

刷新表格

grid.view.refresh();

为表格添加复选框

需要使用CheckboxSelectionModel
SelectionModel sm在使用时要放到cm和表格中

var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([    new Ext.grid.RowNumberer(),    sm,    {header:'编号',dataIndex:'id'},    {header:'名称',dataIndex:'name'}]);var data = [    ['1','name1'],    ['2','name2']];var store = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [        {name: 'id'},        {name: 'name'}    ])});store.load();var grid = new Ext.grid.GridPanel({    autoHeight: true,    renderTo: 'grid',    store: store,    cm: cm,    sm: sm});

通过RowSelectionModel设置只选择一行

var grid = new Ext.grid.GridPanel({    autoHeight: true,    renderTo: 'grid',    store: store,    cm: cm,    sm: new Ext.grid.RowSelectionModel({singleSelect:true})});

使用选择模型获取数据

grid.on('click', function() {    var selections = grid.getSelectionModel().getSelections();    for (var i = 0; i < selections.length; i++) {        var record = selections[i];        Ext.Msg.alert(record.get("id"));    }});

表格视图

从MVC的思想来看表格控件：
* Ext.data.Store可看做模型
* Ext.grid.GridPanel可看做控制器
* Ext.grid.GridView可看做视图
* 一般GridView由GridPanell自动生成，如果想设置GridView的属性时，可以通过Ext.grid.GridPanel的getView()获得视图实例

Ext.get('button1').on('click', function() {grid.getView().scrollToTop();    grid.getView().focusCell(0, 0);    var cell  = grid.getView().getCell(0, 0);    cell.style.backgroundColor = 'red';});

使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数

var grid = new Ext.grid.GridPanel({    height: 100,    width: 400,    renderTo: 'grid',    store: new Ext.data.Store({        autoLoad: true,        proxy: new Ext.data.MemoryProxy(data),        reader: new Ext.data.ArrayReader({}, meta)    }),    columns: meta,    viewConfig: {        columnsText: '显示的列',  //设置下拉菜单提示文字        scrollOffset: 30,    //设置右侧滚动条的预留宽度        sortAscText: '升序',    //设置下拉菜单提示文字        sortDescText: '降序',   //设置下拉菜单提示文字        forceFit: true   //自动延展每列的长度    }});

为表格添加分页工具条

* 可以使用GridPanel的bbar属性，并创建Ext.PagingToolbar分页工具条对象
* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。

var grid = new Ext.grid.GridPanel({    renderTo: 'grid',    autoHeight: true,    store: store,    cm: cm,    bbar: new Ext.PagingToolbar({        pageSize: 10,    //每页显示10条数据        store: store,        displayInfo: true,   //显示数据信息        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',        emptyMsg: "没有记录"   //没有数据时显示的信息    })});store.load();

从后台脚本获取分页数据

使用HttpProxy传递请求，获取服务器的JSON数据，交给JsonReader解析

var cm = new Ext.grid.ColumnModel([    {header:'编号',dataIndex:'id'},    {header:'名称',dataIndex:'name'}]);var store = new Ext.data.Store({    proxy: new Ext.data.HttpProxy({url:'page.jsp'}),    reader: new Ext.data.JsonReader({        totalProperty: 'totalProperty',        root: 'root'    }, [        {name: 'id'},        {name: 'name'}    ])});var grid = new Ext.grid.GridPanel({    renderTo: 'grid',    autoHeight: true,   //数据传回来之前高度未知，所以要使用自适应高度    store: store,    cm: cm,    bbar: new Ext.PagingToolbar({        pageSize: 10,        store: store,        displayInfo: true,        displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',        emptyMsg: "没有记录"    })});store.load({params:{start:0,limit:10}});

如果想让分页工具条显示在表格的顶部，可以使用GridPanel的tbar属性设置添加工具条

让ExtJS在对返回的数据进行分页

* 需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件
* 再使用PagingMemoryProxy设置代理

var store = new Ext.data.Store({    proxy: new Ext.data.PagingMemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [        {name: 'id'},        {name: 'name'},        {name: 'descn'}    ])});//在创建GridPanel之后调用store.load({params:{start:0,limit:3}});

可编辑表格控件EditorGrid的使用

制作一个简单的EditorGrid的步骤

1、定义列ColumnModel，在里面添加editor属性

var cm = new Ext.grid.ColumnModel([{    header: '编号',    dataIndex: 'id',    editor: new Ext.grid.GridEditor(        new Ext.form.TextField({            allowBlank: false  //不允许在TextField中输入空值        })    )}, {    header: '名称',    dataIndex: 'name',    editor: new Ext.grid.GridEditor(        new Ext.form.TextField({            allowBlank: false        })    )}]);

2、准备一个数组

var data = [    ['1','Jason'],    ['2','Jay']];

3、创建Ext.data.Store，设置内存代理，设置ArrayReader解析数组

var store = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [        {name: 'id'},        {name: 'name'}    ])});

4、加载数据，创建EditorGridPanel

store.load();var grid = new Ext.grid.EditorGridPanel({    autoHeight: true,    renderTo: 'grid',    store: store,    cm: cm});

为可编辑表格添加和删除数据

1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类

var MyRecord = Ext.data.Record.create([    {name: 'id', type: 'string'},    {name: 'name', type: 'string'}]);store.load();

2、创建EditorGridPanel面板，在属性tbar中创建Ext.Toolbar

var grid = new Ext.grid.EditorGridPanel({    autoHeight: true,    renderTo: 'grid',    store: store,    cm: cm,    tbar: new Ext.Toolbar(['-', {  //-表示菜单分隔符        text: '添加一行',        handler: function(){            var p = new MyRecord({                id:'',                name:''            });            grid.stopEditing();  //关闭表格的编辑状态            store.insert(0, p);  //创建的Record插入store的第一行            grid.startEditing(0, 0);  //激活第一行第一列的编辑状态        }    }, '-', {        text: '删除一行',        handler: function(){            Ext.Msg.confirm('信息', '确定要删除？', function(btn){                if (btn == 'yes') {                    var sm = grid.getSelectionModel();  //获取表格的选择模型                    var cell = sm.getSelectedCell();   //获取选中的单元格                    var record = store.getAt(cell[0]);  //通过行号得到store这一行对应的Record                    store.remove(record);   //移除数据                }            });        }    }, '-'])});

为可编辑表格保存修改的结果

在上面例子的基础之上，添加一个保存按钮

text: '保存',handler: function(){    var m = store.modified.slice(0); //获得store中修改过得数据    for (var i = 0; i < m.length; i++) {  //验证表格信息是否正确，是否包含空格        var record = m[i];        var fields = record.fields.keys;        for (var j = 0; j < fields.length; j++) {            var name = fields[j];            var value = record.data[name];            var colIndex = cm.findColumnIndex(name);            var rowIndex = store.indexOfId(record.id);            var editor = cm.getCellEditor(colIndex).field;            if (!editor.validateValue(value)) {                Ext.Msg.alert('提示', '请检查输入的数据是否正确！', function(){                    grid.startEditing(rowIndex, colIndex);                });                return;            }        }    }    var jsonArray = [];    Ext.each(m, function(item) {        jsonArray.push(item.data);  //把修改过得数据放到jsonArray中    });    Ext.lib.Ajax.request(   //使用Ajax请求提交给后台        'POST',        'save_data.jsp',        {success: function(response){  //返回成功            Ext.Msg.alert('信息', response.responseText, function(){                store.reload();            });        },failure: function(){   //返回失败            Ext.Msg.alert("错误", "服务器保存数据出错！");        }},        'data=' + encodeURIComponent(Ext.encode(jsonArray))    );}

另外store可以设置属性pruneModifiedRecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。

限制表格输入的数据类型

NumberField

{    header:'ID',    dataIndex:'id',    editor:new Ext.grid.GridEditor(new Ext.form.NumberField({  //NumberField限制只能输入数字        allowBlank: false,        allowNegative: false,  //不能输入减号        maxValue: 10    }))}

ComboBox

var comboData = [    ['0','Java'],    ['1','Android']];{    header:'ComboBox',    dataIndex:'combo',    editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({        store: new Ext.data.SimpleStore({            fields:['value','text'],            data: comboData        }),        emptyText: '请选择',        mode: 'local',        triggerAction: 'all',        valueField: 'value',        displayField: 'text',        readOnly:true    })),    renderer: function(value){        return comboData[value][1];    }}

DateField

{    header:'Date',    dataIndex:'date',    editor:new Ext.grid.GridEditor(new Ext.form.DateField({        format: 'Y-m-d',        minValue: '2011-07-24',        disabledDays: [0, 6],        disabledDaysText: '选择周一到周六之间的日期'    })),    renderer: function(value) {        return value.format("Y-m-d");    }}

属性表格控件PropertyGrid的使用

是在EditorGrid的基础上开发的更智能的高级表格组件

var grid = new Ext.grid.PropertyGrid({    title: '属性表格控件PropertyGrid',    autoHeight: true,    width: 400,    renderTo: 'grid',    viewConfig: {        forceFit: true    },    source: {        "String": "String",        "Date": new Date(Date.parse('07/24/2011')),        "boolean": false,        "float": .01    }});

禁用PropertyGrid编辑功能的方法

grid.on('beforeedit', function(e){e.cancel = true;return false;});

根据表格的name获取value

grid.store.getById('Jason').get(value);