ExtJS 4.2.3分组Bug

时间:2015-01-13 04:09:34

标签: javascript extjs extjs4 extjs4.2

我正在使用store.group()为用户提供按各种字段对网格进行分组的选项。 现在使用extjs4.2.3在遇到4.2.1中的许多错误之后,store.group()似乎根本不起作用。 如何复制: 按“组”按钮,该按钮应对网格进行分组。仅对数据进行排序。 从列菜单中选择“按此字段分组”,分组开始正常工作。

类似地,store.clearGrouping()的行为方式相同。 以下是示例代码:

    Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['student', 'subject', {
        name: 'mark',
        type: 'int'
    }]
});

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 240,
    itemId: 'gridtest',
    renderTo: document.body,
    features: [{
        groupHeaderTpl: 'Subject: {name}',
        ftype: 'groupingsummary'
    }],
    store: {
        model: 'TestResult',
        itemId: 'testStore',
        //groupField: 'subject',
        data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
        }, {
            student: 'Student 1',
            subject: 'Science',
            mark: 72
        }, {
            student: 'Student 2',
            subject: 'Math',
            mark: 96
        }, {
            student: 'Student 2',
            subject: 'Science',
            mark: 68
        }]
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value) {
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    }],
    tbar: [{
        xtype: 'button',
        text: 'Group',
        handler: function(button, e) {
            var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
            store.group('subject');
        }
    }, {
        xtype: 'button',
        text: 'clear',
        handler: function(button, e) {
            var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
            store.clearGrouping();
        }
    }]

});

在ExtJS 4.2.1中运行代码在sencha小提琴上运行良好,但在4.2.3上运行不正常 我使用http://docs.sencha.com/extjs/4.2.3/上的代码预览选项进行了测试。

2 个答案:

答案 0 :(得分:0)

以上代码在extjs-4.2.3中运行正常。

打开http://docs.sencha.com/extjs/4.2.3/并在开发者工具控制台选项卡中执行以下代码: - 集团'集团'按钮工作正常。

Ext.define('TestResult', {
  extend: 'Ext.data.Model',
  fields: ['student', 'subject', {
    name: 'mark',
    type: 'int'
  }]
});

var grpGrid = Ext.create('Ext.grid.Panel', {
  width: 200,
  height: 240,
  itemId: 'gridtest',
  renderTo: document.body,
  features: [{
    groupHeaderTpl: 'Subject: {name}',
    ftype: 'groupingsummary'
  }],
  store: {
    model: 'TestResult',
    itemId: 'testStore',
    //groupField: 'subject',
    data: [{
        student: 'Student 1',
        subject: 'Math',
        mark: 84
    }, {
        student: 'Student 1',
        subject: 'Science',
        mark: 72
    }, {
        student: 'Student 2',
        subject: 'Math',
        mark: 96
    }, {
        student: 'Student 2',
        subject: 'Science',
        mark: 68
    }]
  },
  columns: [{
    dataIndex: 'student',
    text: 'Name',
    summaryType: 'count',
    summaryRenderer: function(value) {
        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
    }
  }, {
    dataIndex: 'mark',
    text: 'Mark',
    summaryType: 'average'
  }],
  tbar: [{
    xtype: 'button',
    text: 'Group',
    handler: function(button, e) {
        var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
        store.group('subject');
    }
  }, {
    xtype: 'button',
    text: 'clear',
    handler: function(button, e) {
        var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
        store.clearGrouping();
    }
  }]

});

Ext.create('Ext.window.Window', {
  title: 'Hello',
  height: 200,
  width: 400,
  layout: 'fit',
  items: [grpGrid]
}).show();

答案 1 :(得分:0)

问题在ExtJS 4.2.4的每晚构建中得到解决 缺陷ID:EXTJS-15190 link