ExtJS中表格控件的使用,属性设置和数据的获取
本文由发表于6年前 | Javascript | 评论数 1 |  被围观 37,157 views+

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: store
	cm: 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: cm
	viewConfig:{   //让每列自动填充满表格
		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);
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-form-controls-in-the-use-of-property-and-access-to-data.html
关键字: , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 7/24
文章评论
    一条评论
  1. www.zhaixu.net 2016年05月18日19:13:07  #-49楼 回复 回复

    明白读了

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 分享两款Javascript在线IDE 2013/1/11
2 JavaScript设计模式笔记 – 适配器模式 装饰者模式 2012/11/19
3 汇编cmp指令和条件转移指令实现高级语言中的IF语句功能 2011/4/18
4 Python语法笔记1 2014/3/9
5 Struts2笔记 – Struts2相关帮助文档和在线学习资料 2011/6/18
6 Hibernate多对一关联映射原理、映射方法和数据的保存 2011/5/29
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.