ExtJs4 Group 分组如何实现显示分组名称

ExtJs4 store 中 进行group分组

var resourceStore = new Sch4.data.ResourceStore({
        model: "resourceModel",
        groupField: 'DOCK_NO',
        sorters: ['DOCK_NO', 'Name'],
        storeId: 'CS07_ResourceStore',
        proxy: {
            type: 'ajax',
            url: "getResourceData.action",
            reader: {
                type: 'json',
                rootProperty: 'data',
                idProperty: 'Id'
            },
            actionMethods: {
                read: 'POST'
            }
        },
        listeners: {
            beforeload: resourceBeforeloadFn,
            load: resourceLoadFn
        }
    });

在这个示例中,已字段DOCK_NO进行分组,但是效果是这样子的:

分组的名称也是DOCK_NO,这个需要改为"船坞/船台号";

需要进行如下修改:

在这个store的所属grid的cm中,需要进行如下配置:

var columns =
		[{
		    header: 'ResourceId',
		    dataIndex: 'Id',
		    hidden: true,
		    sortable: false,
		    menuDisabled: true
		}, {
		    text: "船坞/船台号",//必须是text配置项
		    dataIndex: "DOCK_NO",
            hidden:true
		}, {
		    header: '船号',
		    width: 100,
		    dataIndex: 'Name',
		    sortable: false
...

然后这个grid的分组名会变为"船坞/船台号".OK,大功告成.

其实当ColumnModel中,没有配置header的时候,只配置text,grid也可正常显示表头.关键还是需要去看官方的Api说明.

最后附上效果图: