ExtJS中可编辑表格的自定义风格的数据显示

在ExtJS实际开发中,我们经常碰到需要使用可编辑表格的地方。表格一般用于显示数据之用,但是在实际产品中,我们也会需要利用可编辑表格来完成数据处理和提交的工作。

在ExtJS 4.X系列中,Grid提供的可编辑功能可以很好的帮助我们实现这一需求。偶尔我们还需要对于编辑后的进行一些显示上的处理才能满足功能的需求:

  • 输入编辑的数据,根据输入的数据现实不同的显示效果。比如数字框,需要根据用户输入的数值,将单元格的数字效果转换为红色或者其它颜色,而表格保存时仅保留数值。
  • 输入编辑可选择下拉框数据,然后单元格内现实的下拉框的displayfield的内容,而提交的时候需要提交下拉框的valueField的对应的值。

下面将简单介绍利用Grid自带的单元格renderer API实现以上功能的过程。

对于第一个需求实现方法如下:

{
    xtype: 'gridcolumn',
    dataIndex: 'dataRange',
    text: '数据范围',
    editor: 'textfield',
    renderer: function(val) {
        if(val > 100) {
            return '<font color="red">'+val+"</font>";
        } else {
            return val;
        }
    }
}

对于第二个需求实现方法:

var comboboxStore = Ext.create('Ext.data.store', {
    data: [
        {'display': '是', 'value': '1'},
        {'display': '否', 'value': '2'}
    ],
    fields: [
        {name: 'display'},
        {name: 'value'}
    ]
});
........
//grid定义
{
    xtype: 'gridcolumn',
    dataIndex: 'dataRange',
    text: '数据范围',
    editor: Ext.create('Ext.form.field.ComboBox',{
        editable: false,
        queryMode: 'local',
        triggerAction: 'all',
        selectOnTab: true,
        store: comboboxStore,
        displayField: 'display',
        valueField: 'value',
        listClass: 'x-combo-list-small'
    }),
    renderer: function(val) {
        var index = comboboxStore.findExact('value',val);
        if(index != -1) {
            var rs = comboboxStore.getAt(index).data;
            return rs.display;
        }

    }
}

实现效果如图:

combobox

ExtJS作为一个完整的RIA开发框架,其内部的丰富组件已经提供了非常完整的API实现了,通常情况下,我们可以通过简单的API组合就可以实现满足功能所需要的实现方法。因此对于ExtJS的API文档和样例应该有一定的认识和理解。除了标准的组件支持,ExtJS还提供了一些其它的组合组件,例如:MutliSelect,itemselector等等。

itemselector

mutliselector