Results 1 to 3 of 3

Thread: Are DataGrid add-ons like JSON, edit, pagingand grouping orthogonal

  1. #1
    Ext JS Premium Member JonathansCorner.com's Avatar
    Join Date
    Jan 2010
    Posts
    22
    Vote Rating
    0
      0  

    Default Are DataGrid add-ons like JSON, edit, pagingand grouping orthogonal

    I have a working EditGrid, populated from JSON, and I am trying to add grouping. My code is below; the grouping doesn't seem to be showing up, and for a seven-page resultset, only the first page is showing up.

    Code:
                        var writer = new Ext.data.JsonWriter({
                          encode: true,
                          writeAllFields: false
                          });
                        var reader = new Ext.data.JsonReader({
                            fields: ['id', 'approved_date',
                              'approval_status', {name:'approval_id', type:'int'},
                              'reference_id', 'manufacturer_distributor_name',
                              'shipping_authorization_number',
                              'purchase_order_number', 'original_amount',
                              'open_amount', 'requestor'],
                            root: 'dataRoot'
                        });
                        var store = new Ext.data.GroupingStore({
                          proxy: new Ext.data.HttpProxy({
                              api:
                                  {
                                  create: '/create',
                                  'delete': '/delete',
                                  read: '/read',
                                  update: '/update'
                                  }}),
                              autoSave: true,
                              groupField: 'manufacturer_distributor_name',
                              reader: reader,
                              remoteSort: true,
                              root: 'dataRoot',
                              sortInfo: {field: 'manufacturer_distributor_name',
                                direction: 'ASC'},
                              totalProperty: 'totalCount',
                              writer: writer
                              });
    
                        var cm = new Ext.grid.ColumnModel({
                            defaults: {
                              sortable: true
                              },
                            columns: [{
                                id: 'approved_date',
                                header: 'Approved Date',
                                dataIndex: 'approved_date',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                },
                                {
                                id: 'approval_status',
                                header: 'Approval Status',
                                dataIndex: 'approval_status',
                                editor: new fm.ComboBox({
                                    typeAhead: true,
                                    triggerAction: 'all',
                                    store: [
                                        ['Approved', 'Approved'],
                                        ['Held', 'Held'],
                                        ['Rejected', 'Rejected']
                                        ],
                                    lazyRender: true,
                                    listClass: 'x-combo-list-small'
                                    })
                                },
                                {
                                id: 'approval_id',
                                header: 'Approval ID',
                                dataIndex: 'approval_id',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: false
                                    })
                                },
                                {
                                id: 'reference_id',
                                header: 'Reference ID',
                                dataIndex: 'reference_id',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                },
                                {
                                id: 'shipping_authorization_number',
                                header: 'Shipping Authorization Number',
                                dataIndex: 'shipping_authorization_number',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                },
                                {
                                id: 'manufacturer_distributor_name',
                                header: 'Manufacturer / Distributor Name',
                                dataIndex: 'manufacturer_distributor_name',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                },
                                {
                                id: 'purchase_order_number',
                                header: 'Purchase Order Number',
                                dataIndex: 'purchase_order_number',
                                flex: 1,
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                },
                                {
                                id: 'original_amount',
                                header: 'Original Amount',
                                dataIndex: 'original_amount',
                                align: 'right',
                                renderer: 'usMoney',
                                editor: new fm.NumberField({
                                    allowBlank: false,
                                    allowNegative: false
                                    })
                                },
                                {
                                id: 'open_amount',
                                header: 'Open Amount',
                                dataIndex: 'open_amount',
                                align: 'right',
                                renderer: 'usMoney',
                                editor: new fm.NumberField({
                                    allowBlank: false,
                                    allowNegative: false
                                    })
                                },
                                {
                                id: 'requestor',
                                header: 'Requestor',
                                dataIndex: 'requestor',
                                editor: new fm.TextField({
                                    allowBlank: true
                                    })
                                }],
                                selModel:
                                    {
                                    selType: 'cellmodel'
                                    },
                                renderTo: 'editor-grid',
                                width: 600,
                                height: 388,
                                title: 'Approvals',
                                frame: true,
                            });
                        store.load();
                        var grid = new Ext.grid.EditorGridPanel({
                          animCollapse: false,
                          autoExpandColumn: 'approval_id',
                          cm: cm,
                          collapsible: true,
                          frame: true,
                          height: 388,
                          iconCls: 'icon-grid',
                          renderTo: 'editor-grid',
                          stateful: true,
                          stateId: 'grid',
                          store: store,
                          title: 'Approvals',
                          width: 1010,
                          clicksToEdit: 1,
                          bbar: new Ext.PagingToolbar({
                              pageSize: 10,
                              store: store,
                              displayInfo: true,
                              displayMsg: 'Displaying items {0} - {1} of {2}',
                              emptyMsg: 'No pages to display',
                              items:[
                                  '-'
                              ]}),
                          plugins:[new Ext.ux.grid.Search({
                            iconCls:'icon-zoom',
                            readonlyIndexes:[],
                            disableIndexes:[],
                            minChars: 2,
                            autofocus: true})],
                          tbar: [{
                            text: 'Add Approval',
                            handler: function()
                                {
                                var approval = grid.getStore().recordType;
                                var a = new approval({approved_date: '',
                                  approval_status: '',
                                  approval_id: '',
                                  reference_id: '',
                                  manufacturer_distributor_name: '',
                                  shipping_authorization_number: '',
                                  purchase_order: '',
                                  original_amount: 0.0,
                                  open_amount: 0.0,
                                  requestor: ''
                                  })
                                grid.stopEditing();
                                store.insert(0, a);
                                grid.startEditing(0, 0);
                                }
                            }],
                          view: new Ext.grid.GroupingView({
                            forceFit: true,
                            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                            })
                        });
    So far as I can tell this imitates the functionality in http://dev.sencha.com/deploy/dev/exa...id/grouping.js to make a grouping grid. Is there an error in my code? (I hope so.) Or are these modules not orthogonal in that you cannot plug in an arbitrary number of them and have things work?

    Thanks,
    ? Jonathan Hayward, [email protected]
    ? An Orthodox Christian author: theology, literature, et cetera.
    ? My award-winning collection is available for free reading online:
    ? I invite you to visit my main site at http://JonathansCorner.com/

  2. #2
    Touch Premium Member
    Join Date
    Oct 2009
    Location
    Sydney, Australia
    Posts
    12
    Vote Rating
    0
      0  

    Default

    I've been playing recently with grid grouping example by adding the ability to edit the cells inside the grouped grid. Also, I added the paging toolbar to the grid, but I believe that grouping and paging are mutually exclusive, therefore, the toolbar is active only when grouping is cleared (press "Clear grouping" to see what I mean).

    Please, see the code below, and let me know if it helps in any way.
    To make things working, just place the code below in separate file and include it instead of "grouping.js" file in default example.

    Code:
    /*!
     * Ext JS Library 3.3.1
     * Copyright(c) 2006-2010 Sencha Inc.
     * [email protected]
     * http://www.sencha.com/license
     */
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        var xg = Ext.grid;
        var fm = Ext.form;
    
    
        // shared reader
        var reader = new Ext.data.ArrayReader({}, [
           {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'},
           {name: 'desc'}
        ]);
        
        cm = new xg.ColumnModel({
            // specify any defaults for each column
            defaults: {
                sortable: true // columns are not sortable by default           
            },columns: [{
                    id:'company',
                    header: "Company", 
                    width: 60, 
                    sortable: true, 
                    dataIndex: 'company', 
                    editor: new fm.TextField({
                        allowBlank: false
                    })
                },
                {
                    header: "Price", 
                    width: 20, 
                    sortable: true, 
                    renderer: Ext.util.Format.usMoney, 
                    dataIndex: 'price',
                    editor: new fm.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 100000
                    })
                },
                {
                    header: "Change", 
                    width: 20, 
                    sortable: true, 
                    dataIndex: 'change', 
                    renderer: Ext.util.Format.usMoney,
                    editor: new fm.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 100000
                    })
                },
                {
                    header: "Industry", 
                    width: 20, 
                    sortable: true, 
                    dataIndex: 'industry', 
                    editor: new fm.TextField({
                        allowBlank: false
                    })
                },
                {
                    header: "Last Updated", 
                    width: 20, 
                    sortable: true, 
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
                    dataIndex: 'lastChange',
                    editor: new fm.DateField({
                        format: 'm/d/Y',
                        minValue: '01/01/2006'
                    })
                }]
            });
            
        var store = new Ext.data.GroupingStore({
                reader: reader,
                data: xg.dummyData,
                sortInfo:{field: 'company', direction: "ASC"},
                groupField:'industry',
                listeners:{
                    groupchange: function(st,f){
                        bbar.disable();
                    }
                }
            });
    
        var bbar = new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying items {0} - {1} of {2}',
                emptyMsg: 'No pages to display',
                disabled: true,
                items:['-']
            });
    
        var grid = new xg.EditorGridPanel({
            store: store,
            cm : cm,
    
            view: new xg.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),
    
            frame:true,
            width: 700,
            height: 450,
            collapsible: true,
            animCollapse: false,
            clicksToEdit: 1,
            title: 'Grouping Example',
            iconCls: 'icon-grid',
            fbar  : ['->', {
                text:'Clear Grouping',
                iconCls: 'icon-clear-group',
                handler : function(){
                    store.clearGrouping();
                    bbar.enable();
                }
            }],
            bbar: bbar,
            renderTo: document.body
        });
    });
    
    
    
    // Array data for the grids
    Ext.grid.dummyData = [
        ['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&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 & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
        ['JP Morgan & Chase & 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 & 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 & 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']
    ];
    
    // add in some dummy descriptions
    for(var i = 0; i < Ext.grid.dummyData.length; i++){
        Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
    }

  3. #3
    Ext JS Premium Member JonathansCorner.com's Avatar
    Join Date
    Jan 2010
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Thank you!
    ? Jonathan Hayward, [email protected]
    ? An Orthodox Christian author: theology, literature, et cetera.
    ? My award-winning collection is available for free reading online:
    ? I invite you to visit my main site at http://JonathansCorner.com/

Similar Threads

  1. Add print option in edit-grouping grid
    By riddhibhatia in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 11 May 2009, 3:32 AM
  2. Help with DataGrid/JSON/PHP
    By hydra12 in forum Ext 1.x: Help & Discussion
    Replies: 67
    Last Post: 13 Jan 2009, 7:32 AM
  3. JSON to datagrid (apologies - another JSON post!)
    By sanjshah in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 4 Jan 2009, 1:52 PM
  4. Use datagrid grouping in extJS 1.1
    By gibransyah in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Oct 2007, 2:46 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •