Question

我正在使用ExtJs 4.1网格并添加了组功能。在商店中我指定了groupField和分组功能正常工作。但是当网格呈现时，组标题显示为组：组名称“。如何防止'组'关键字出现在组标题中（在下图中突出显示）。< / p>

enter image description here

Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
   Ext.regModel('Teams', {
       fields: ['name', 'sport']
   });

   var teamStore = new Ext.data.Store({
       model: 'Teams',
       sorters: ['sport','name'],
       groupField: 'sport',
       data: [
           { name: 'Aaron', sport: 'Table Tennis' },
           { name: 'Aaron', sport: 'Football' },
           { name: 'Abe', sport: 'Basketball' },
           { name: 'Tommy', sport: 'Football' },
           { name: 'Tommy', sport: 'Basketball' },
           { name: 'Jamie', sport: 'Table Tennis' },
           { name: 'Brian', sport: 'Basketball' },
           { name: 'Brian', sport: 'Table Tennis' }
       ]
   });

   var grid = new Ext.grid.GridPanel({
       renderTo: Ext.getBody(),
       store: teamStore,
       width: 400,
       height: 300,
       title: 'Sports Teams',
       features: [{
           ftype: 'grouping'
       }],
       headers: [{
           text: 'Name',
           flex: 1,
           dataIndex: 'name'
       },{
           text: 'Sport',
           dataIndex: 'sport'
       }]
   });
});

Answer 1

使用groupHeaderTpl配置解决您的问题。请参考以下示例代码以供参考。

注意：参考Ext.grid.feature.Grouping类创建区域，参见groupHeaderTpl config。当前代码将按预期工作。

使用网格中的组列名称

//groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',

网格中没有组列名称

groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',

我希望这会对你有所帮助。复制下面的代码并将其粘贴到https://fiddle.sencha.com/并查看输出。

我的示例代码：

Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
    // wrapped in closure to prevent global vars.
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });

    var restaurants = Ext.create('Ext.data.Store', {
        storeId: 'restaraunts',
        model: 'Restaurant',
        groupField: 'cuisine',
        sorters: ['cuisine','name'],
        data: [{
            name: 'Cheesecake Factory',
            cuisine: 'American'
        },{
            name: 'University Cafe',
            cuisine: 'American'
        },{
            name: 'Slider Bar',
            cuisine: 'American'
        },{
            name: 'Shokolaat',
            cuisine: 'American'
        },{
            name: 'Gordon Biersch',
            cuisine: 'American'
        },{
            name: 'Crepevine',
            cuisine: 'American'
        },{
            name: 'Creamery',
            cuisine: 'American'
        },{
            name: 'Old Pro',
            cuisine: 'American'
        },{
            name: 'Nola\'s',
            cuisine: 'Cajun'
        },{
            name: 'House of Bagels',
            cuisine: 'Bagels'
        },{
            name: 'The Prolific Oven',
            cuisine: 'Sandwiches'
        },{
            name: 'La Strada',
            cuisine: 'Italian'
        }],
        listeners: {
            groupchange: function(store, groupers) {
                var grouped = restaurants.isGrouped(),
                    groupBy = groupers.items[0] ? groupers.items[0].property : '',
                    toggleMenuItems, len, i = 0;

                // Clear grouping button only valid if the store is grouped
                grid.down('[text=Clear Grouping]').setDisabled(!grouped);

                // Sync state of group toggle checkboxes
                if (grouped && groupBy === 'cuisine') {
                    toggleMenuItems = grid.down('button[text=Toggle groups...]').menu.items.items;
                    for (len = toggleMenuItems.length; i < len; i++) {
                        toggleMenuItems[i].setChecked(groupingFeature.isExpanded(toggleMenuItems[i].text));
                    }
                    grid.down('[text=Toggle groups...]').enable();
                } else {
                    grid.down('[text=Toggle groups...]').disable();
                }
            }
        }
    });

    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            //groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            hideGroupedHeader: true,
            startCollapsed: true,
            id: 'restaurantGrouping'
        }),
        groups = restaurants.getGroups(),
        len = groups.length, i = 0,
        toggleMenu = [],
        toggleGroup = function(item) {
            var groupName = item.text;
            if (item.checked) {
                groupingFeature.expand(groupName, true);
            } else {
                groupingFeature.collapse(groupName, true);
            }
        };

    // Create checkbox menu items to toggle associated groupd
    for (; i < len; i++) {
        toggleMenu[i] = {
            xtype: 'menucheckitem',
            text: groups[i].name,
            handler: toggleGroup
        }
    }

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        collapsible: true,
        iconCls: 'icon-grid',
        frame: true,
        store: restaurants,
        width: 600,
        height: 300,
        title: 'Restaurants',
        resizable: true,
        features: [groupingFeature],
        tbar: ['->', {
            text: 'Toggle groups...',
            menu: toggleMenu
        }],

        // Keep checkbox menu items in sync with expand/collapse
        viewConfig: {
            listeners: {
                groupcollapse: function(v, n, groupName) {
                    if (!grid.down('[text=Toggle groups...]').disabled) {
                        grid.down('menucheckitem[text=' + groupName + ']').setChecked(false, true);
                    }
                },
                groupexpand: function(v, n, groupName) {
                    if (!grid.down('[text=Toggle groups...]').disabled) {
                        grid.down('menucheckitem[text=' + groupName + ']').setChecked(true, true);
                    }
                }
            }
        },
        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        },{
            text: 'Cuisine',
            flex: 1,
            dataIndex: 'cuisine'
        }]
    });
});

Answer 2

aggregate(main ~ label ,data.frame(main = c(main),label = c(label)),sum)

ExtJs 4.1网格分组功能 - 阻止＆＃39;组＆＃39;关键字出现在标题中

2 个答案: