1. #31
    Sencha User
    Join Date
    Feb 2012
    Vote Rating
    webfriend13 is on a distinguished road


    Default Please share the fiddle for this plugin

    Please share the fiddle for this plugin

    Hi All, So many people have replied to this thread but no one has shared the full code (the store, data , model, feature &grid). I think it would be great if someone please share a fiddle showcasing multi Grouping feautre. Thanks!!!

  2. #32
    Sencha User
    Join Date
    Apr 2010
    Vote Rating
    britoyen is on a distinguished road


    Default No achievement make it run properly

    No achievement make it run properly

    I am newbie with Extjs 4 and I am needing to adapt this component MultiGrouping in my application, but can not find the proper way to implement it and make it work, I will be doing is not wrong, but it does not work properly ...

    This is the example code where I'm trying to implement:

    <!DOCTYPE html>
        <title>Multigrouping Example</title>
        <link href="/ext-4.2.1/resources/css/ext-all-neptune.css" rel=stylesheet></link>
        <link href="MultiGrouping.css" rel=stylesheet></link>
        <script type="text/javascript" src="/ext-4.2.1/ext-all.js"></script>
        <script type="text/javascript" src="MultiGrouping.js"></script>
        <script type="text/javascript">
        Ext.onReady(function() {
            var store = Ext.create('Ext.data.ArrayStore', {
                // store configs
                storeId: 'Companies',
                // reader configs
                fields: [
                   {name: 'company'},
                   {name: 'price', type: 'float'},
                   {name: 'change', type: 'float'},
                   {name: 'pctChange', type: 'float'},
                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                   {name: 'industry'}
                groupers: ['industry', 'lastChange'],
                data: [
                    ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
                    ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
                    ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
                    ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
                    ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
                    ['AT&amp;T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
                    ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
                    ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
                    ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
                    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
                    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
                    ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
                    ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
                    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
                    ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
                    ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
                    ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
                    ['Johnson &amp; Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
                    ['JP Morgan &amp; Chase &amp; Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
                    ['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
                    ['Merck &amp; Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
                    ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
                    ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
                    ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
                    ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
                    ['The Procter &amp; Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
                    ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
                    ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
                    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
                    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
                //sorters: ['industry', 'company']
            Ext.define('KitchenSink.view.grid.ArrayGrid', {
                extend: 'Ext.grid.Panel',
                xtype: 'array-grid',
                store: 'Companies',
                collapsible: true,
                iconCls: 'icon-grid',
                frame: true,
                layout: 'fit',
                // Need a minHeight. Neptune resizable framed panels are overflow:visible so as to
                // enable resizing handles to be embedded in the border lines.
                minHeight: 200,
                title: 'Restaurants',
                resizable: true,
                features: [{
                    ftype: 'multigrouping',
                    groupHeaderTpl: 'Subject: {name}',
                    id: 'industryGrouping'
                initComponent: function() {
                    //this.store = new KitchenSink.store.Restaurants();
                    this.columns = [
                            {header: "Industry", width: 200, sortable: true, dataIndex: 'industry'},
                            {header: "Company", width: 300, sortable: true, dataIndex: 'company'},
                            {header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                            {header: "Change", width: 100, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
                             {header: "Last Updated", width: 100, sortable:  true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex:  'lastChange'}
                    this.groupingFeature = this.view.getFeature('industryGrouping');
            new KitchenSink.view.grid.ArrayGrid({
                renderTo: 'grid'
            <div id="grid"></div>

    Excuse my bad English ... hope I can tell where my mistake ... Thanks ...