1. #1
    Ext User
    Join Date
    Apr 2009
    Location
    India
    Posts
    15
    Vote Rating
    0
    riddhibhatia is on a distinguished road

      0  

    Default Extjs Editable Grid with grouping and paging

    Extjs Editable Grid with grouping and paging


    Hie.....i have a problem in implementing ExtJs Editable grid along with grouping. The problem is that i have used JsonReader for reading data from a file.i am using FireBug and can see the data in coming in the page but i not able to display the data in the grid....also the paging is coming.....An error: this.fields id undefined in ext-all-debug.js.....My code is as follows......

    my grid-fileter.js file:
    Code:
    Ext.onReady(function(){
    
       // This saves the data after a cell has been edited
      function saveFormData(oGrid_event){
       Ext.Ajax.request({   
          waitMsg: 'Please wait...',
          url: 'grid-filter.php',
          params: {
             task: "UPDATES",
             id:oGrid_event.record.data.id,
             ppo_order_id:oGrid_event.record.data.ppo_order_id,
             ppo_d_vendor_style_no:oGrid_event.record.data.ppo_d_vendor_style_no,
             ppo_d_item_name:oGrid_event.record.data.ppo_d_item_name,
             ppo_d_brand_id:oGrid_event.record.data.ppo_d_brand_id,
             ppo_d_category_id:oGrid_event.record.data.ppo_d_category_id,
             ppo_d_qty:oGrid_event.record.data.ppo_d_qty,
             ppo_d_wsprice:oGrid_event.record.data.ppo_d_wsprice,
             ppo_d_line_comments:oGrid_event.record.data.ppo_d_line_comments
          }, 
          success: function(response){              
          var result=eval(response.responseText);
             switch(result){
             case 1:
                ds.commitChanges();
                ds.reload();
                break;          
             default:
                Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
                break;
             }
          },
          failure: function(response){
             var result=response.responseText;
             Ext.MessageBox.alert('error','could not connect to the database. retry later');    
          }                      
       });   
      }
    
        Ext.menu.RangeMenu.prototype.icons = {
          gt: 'img/greater_then.png', 
          lt: 'img/less_then.png',
          eq: 'img/equals.png'
        };
        Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var fm = Ext.form;
        //var xg = Ext.grid;
        
        var ds = new Ext.data.JsonStore({
                id: 'id',
                
          reader: new Ext.data.JsonReader({
                        id: 'id',
                        totalProperty: 'total',
                        root: 'data',
                        fields: [{name:'id'},
                                {name:'ppo_order_id'},
                                {name:'ppo_d_vendor_style_no'},
                                {name:'ppo_d_item_name'},
                                {name:'ppo_d_brand_id'},
                                {name:'ppo_d_category_id'},
                                {name:'ppo_d_qty'},
                                {name:'ppo_d_wsprice'},
                                {name:'ppo_d_line_comments'},
                                {name:'action'}],
                            }),
                
            sortInfo:{field: 'ppo_order_id', direction: "ASC"},
            remoteSort: true
        });
        ds.load({params:{start: 0, limit: 15}});
        
        
        var filters = new Ext.grid.GridFilters({
          filters:[
            {type: 'numeric',  dataIndex: 'id'},
            {type: 'numeric',  dataIndex: 'ppo_order_id'},
            {type: 'string',  dataIndex: 'ppo_d_vendor_style_no'},
            {type: 'string',  dataIndex: 'ppo_d_item_name'},
            {type: 'numeric',  dataIndex: 'ppo_d_brand_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_category_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_qty'},
            {type: 'numeric',  dataIndex: 'ppo_d_wsprice'},
            {type: 'string',  dataIndex: 'ppo_d_line_comments'},
            {type: 'string', dataIndex: 'action'}
            ]});
    
             
        var cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
          {dataIndex: 'id', header: 'Id' , editor: new fm.NumberField({allowBlank: false})},
          {dataIndex: 'ppo_order_id', header: 'PPO', id: 'ppo_order_id' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'ppo_d_vendor_style_no', header: 'Style Number' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_item_name', header: 'Item Name' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_brand_id', header: 'Brand ID' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_category_id', header: 'Category ID' , editor: new fm.TextField({allowBlank:false})}, 
          {dataIndex: 'ppo_d_qty', header: 'Quantity' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_wsprice', header: 'Whole Sale Price' , editor: new fm.TextField({allowBlank: false})},   
          {dataIndex: 'ppo_d_line_comments', header: 'Comments' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'action', header: 'Action' , editor: new fm.TextField({allowBlank: false})},
        ]);
            
        cm.defaultSortable = true;
        
        var grid = new Ext.grid.EditorGridPanel({
            store: new Ext.data.GroupingStore({
                ds: ds,
                reader: ds.reader,
                sortInfo:{field: 'ppo_order_id', direction: "ASC"},
                groupField:'ppo_order_id',
            }),
    
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
            }),    
            
            id: 'example',
            cm: cm,
            plugins: filters,
            loadMask: true,
            renderTo: 'grid-example',
            width:1000,
            height:450,
            autoExpandColumn:'ppo_order_id',
            title:'Puchase Order Details',
            clicksToEdit:1,
            
             bbar: new Ext.PagingToolbar({
                 pageSize: 15,
                 store: ds,
                 displayInfo: true,
                 plugins: filters,
                 }),
            
        });
        
        grid.render();
        ds.load({params:{start: 0, limit: 15}});
        grid.on('afteredit', saveFormData);
    });
    Is there any problem in my JS??????
    Hope to get a reply soon......
    Last edited by Condor; 29 Apr 2009 at 3:33 AM. Reason: Please post using [ CODE ] tags!

  2. #2
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    You're declaring the store (without any URL), than calling load method. Right after doing this you're declaring the filters,grid and calling load method again.

    And on your grid you are wrapping one store in an GroupingStore? Why this? You should only use GroupingStore in this situation...

    Code:
        
    
        var grid = new Ext.grid.EditorGridPanel({
            store: new Ext.data.GroupingStore({
                ds: ds,   //<---- Grouping store with another store?!
                reader: ds.reader,
                sortInfo: {
                    field: 'ppo_order_id',
                    direction: "ASC"
                },
                groupField: 'ppo_order_id',
            })
            ...
         })
    P.S.: I hardly can understand your js code because you forgot using forum's [code] tags...

  3. #3
    Ext User
    Join Date
    Apr 2009
    Location
    India
    Posts
    15
    Vote Rating
    0
    riddhibhatia is on a distinguished road

      0  

    Default


    i don't know how to use forum's code tags as i am very new here......
    the code still doesnt work even after deleteing the
    ds: ds
    line........i have changed my code to following......

    Code:
    Ext.onReady(function(){
    
       // This saves the data after a cell has been edited
      function saveFormData(oGrid_event){
       Ext.Ajax.request({   
          waitMsg: 'Please wait...',
          url: 'grid-filter.php',
          params: {
             task: "UPDATES",
             id:oGrid_event.record.data.id,
             ppo_order_id:oGrid_event.record.data.ppo_order_id,
             ppo_d_vendor_style_no:oGrid_event.record.data.ppo_d_vendor_style_no,
             ppo_d_item_name:oGrid_event.record.data.ppo_d_item_name,
             ppo_d_brand_id:oGrid_event.record.data.ppo_d_brand_id,
             ppo_d_category_id:oGrid_event.record.data.ppo_d_category_id,
             ppo_d_qty:oGrid_event.record.data.ppo_d_qty,
             ppo_d_wsprice:oGrid_event.record.data.ppo_d_wsprice,
             ppo_d_line_comments:oGrid_event.record.data.ppo_d_line_comments
          }, 
          
          success: function(response){              
          var result = eval(response.responseText);
             switch(result){
             case '1':
                ds.commitChanges();
                ds.reload();
                break;          
             default:
                Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
                break;
             }
          },
          failure: function(response){
             var result=response.responseText;
             Ext.MessageBox.alert('error','could not connect to the database. retry later');    
          }                      
       });   
      }
    
        Ext.menu.RangeMenu.prototype.icons = {
          gt: 'img/greater_then.png', 
          lt: 'img/less_then.png',
          eq: 'img/equals.png'
        };
        Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var fm = Ext.form;
        //var xg = Ext.grid;
        
        var filters = new Ext.grid.GridFilters({
          filters:[
            {type: 'numeric',  dataIndex: 'id'},
            {type: 'numeric',  dataIndex: 'ppo_order_id'},
            {type: 'string',  dataIndex: 'ppo_d_vendor_style_no'},
            {type: 'string',  dataIndex: 'ppo_d_item_name'},
            {type: 'numeric',  dataIndex: 'ppo_d_brand_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_category_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_qty'},
            {type: 'numeric',  dataIndex: 'ppo_d_wsprice'},
            {type: 'string',  dataIndex: 'ppo_d_line_comments'},
            {type: 'string', dataIndex: 'action'}
            ]});
    
             
        var cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
          {dataIndex: 'id', header: 'Id' , editor: new fm.NumberField({allowBlank: false})},
          {dataIndex: 'ppo_order_id', header: 'PPO', id: 'ppo_order_id' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'ppo_d_vendor_style_no', header: 'Style Number' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_item_name', header: 'Item Name' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_brand_id', header: 'Brand ID' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_category_id', header: 'Category ID' , editor: new fm.TextField({allowBlank:false})}, 
          {dataIndex: 'ppo_d_qty', header: 'Quantity' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_wsprice', header: 'Whole Sale Price' , editor: new fm.TextField({allowBlank: false})},   
          {dataIndex: 'ppo_d_line_comments', header: 'Comments' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'action', header: 'Action' , editor: new fm.TextField({allowBlank: false})}
        ]);
            
        cm.defaultSortable = true;
        
        var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                         url:'grid-filter.php',
                            method: 'POST'
                    }),
                             
          reader: new Ext.data.JsonReader({
                        totalProperty: 'total',
                        root: 'data',
                        fields: [{name:'id'},
                                {name:'ppo_order_id'},
                                {name:'ppo_d_vendor_style_no'},
                                {name:'ppo_d_item_name'},
                                {name:'ppo_d_brand_id'},
                                {name:'ppo_d_category_id'},
                                {name:'ppo_d_qty'},
                                {name:'ppo_d_wsprice'},
                                {name:'ppo_d_line_comments'},
                                {name:'action'}]
                    }),
                
            sortInfo:{field: 'ppo_order_id', direction: "ASC"},
            groupField: 'ppo_order_id'
        });
        
        var grid = new Ext.grid.EditorGridPanel({
            store: new Ext.data.GroupingStore({
    url: 'grid-filter.php',
                reader: ds.reader,
                proxy: ds.proxy,
                sortInfo:{field: 'ppo_order_id', direction: "ASC"},
                groupField:'ppo_order_id'
            }),
    
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),    
            
            id: 'example',
            cm: cm,
            plugins: filters,
            loadMask: true,
            renderTo: 'grid-example',
            width:1000,
            height:450,
            autoExpandColumn:'ppo_order_id',
            title:'Puchase Order Details',
            clicksToEdit:1,
            
            bbar: new Ext.PagingToolbar({
                pageSize: 15,
                store: ds,
                displayInfo: true,
                plugins: filters
            })
            
        });
        
        grid.render();
        ds.load({params:{start: 0, limit: 15}});
        grid.on('afteredit', saveFormData);
    });
    Last edited by Condor; 29 Apr 2009 at 3:33 AM. Reason: Please post using [ CODE ] tags!

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You are still creating a store (called ds), but you are using a different groupingstore in your grid.

    Create ds as a groupingstore and use it in your grid!

    ps. When posting code, select your code and press the # button. This will put [ CODE ] tags around it, making it much better readable for us.

  5. #5
    Ext User
    Join Date
    Apr 2009
    Location
    India
    Posts
    15
    Vote Rating
    0
    riddhibhatia is on a distinguished road

      0  

    Default


    After doing the changes that you told...i have the following code....but still have an error as: this.fields is undefined in ext-all-debug.js file

    Code:
    Ext.onReady(function(){
    
       // This saves the data after a cell has been edited
      function saveFormData(oGrid_event){
       Ext.Ajax.request({   
          waitMsg: 'Please wait...',
          url: 'grid-filter.php',
          params: {
             task: "UPDATES",
             id:oGrid_event.record.data.id,
             ppo_order_id:oGrid_event.record.data.ppo_order_id,
             ppo_d_vendor_style_no:oGrid_event.record.data.ppo_d_vendor_style_no,
             ppo_d_item_name:oGrid_event.record.data.ppo_d_item_name,
             ppo_d_brand_id:oGrid_event.record.data.ppo_d_brand_id,
             ppo_d_category_id:oGrid_event.record.data.ppo_d_category_id,
             ppo_d_qty:oGrid_event.record.data.ppo_d_qty,
             ppo_d_wsprice:oGrid_event.record.data.ppo_d_wsprice,
             ppo_d_line_comments:oGrid_event.record.data.ppo_d_line_comments
          }, 
          
          success: function(response){              
          var result = eval(response.responseText);
             switch(result){
             case '1':
                ds.commitChanges();
                ds.reload();
                break;          
             default:
                Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
                break;
             }
          },
          failure: function(response){
             var result=response.responseText;
             Ext.MessageBox.alert('error','could not connect to the database. retry later');    
          }                      
       });   
      }
    
        Ext.menu.RangeMenu.prototype.icons = {
          gt: 'img/greater_then.png', 
          lt: 'img/less_then.png',
          eq: 'img/equals.png'
        };
        Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var fm = Ext.form;
        
        var filters = new Ext.grid.GridFilters({
          filters:[
            {type: 'numeric',  dataIndex: 'id'},
            {type: 'numeric',  dataIndex: 'ppo_order_id'},
            {type: 'string',  dataIndex: 'ppo_d_vendor_style_no'},
            {type: 'string',  dataIndex: 'ppo_d_item_name'},
            {type: 'numeric',  dataIndex: 'ppo_d_brand_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_category_id'},
            {type: 'numeric',  dataIndex: 'ppo_d_qty'},
            {type: 'numeric',  dataIndex: 'ppo_d_wsprice'},
            {type: 'string',  dataIndex: 'ppo_d_line_comments'},
            {type: 'string', dataIndex: 'action'}
            ]});
             
        var cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
          {dataIndex: 'id', header: 'Id' , editor: new fm.NumberField({allowBlank: false})},
          {dataIndex: 'ppo_order_id', header: 'PPO', id: 'ppo_order_id' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'ppo_d_vendor_style_no', header: 'Style Number' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_item_name', header: 'Item Name' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_brand_id', header: 'Brand ID' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_category_id', header: 'Category ID' , editor: new fm.TextField({allowBlank:false})}, 
          {dataIndex: 'ppo_d_qty', header: 'Quantity' , editor: new fm.TextField({allowBlank: false})}, 
          {dataIndex: 'ppo_d_wsprice', header: 'Whole Sale Price' , editor: new fm.TextField({allowBlank: false})},   
          {dataIndex: 'ppo_d_line_comments', header: 'Comments' , editor: new fm.TextField({allowBlank: false})},
          {dataIndex: 'action', header: 'Action' , editor: new fm.TextField({allowBlank: false})}
        ]);
            
        cm.defaultSortable = true;
        
        //data store to store the data
        var ds = new Ext.data.GroupingStore({
                proxy: new Ext.data.HttpProxy({url:'grid-filter.php'}),
                reader: reader,
                sortInfo:{field: 'ppo_order_id', direction: "ASC"},
                groupField:'ppo_order_id'
            });
        // reader to read Json data
        var reader = new Ext.data.JsonReader({
                totalProperty: 'total',
                root: 'data',
                fields: [{name:'id'},
                        {name:'ppo_order_id'},
                        {name:'ppo_d_vendor_style_no'},
                        {name:'ppo_d_item_name'},
                        {name:'ppo_d_brand_id'},
                        {name:'ppo_d_category_id'},
                        {name:'ppo_d_qty'},
                        {name:'ppo_d_wsprice'},
                        {name:'ppo_d_line_comments'},
                        {name:'action'}]
                });
        
        var grid = new Ext.grid.EditorGridPanel({
            store: ds,
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),    
            
            cm: cm,
            plugins: filters,
            loadMask: true,
            renderTo: 'grid-example',
            width:1000,
            height:450,
            autoExpandColumn:'ppo_order_id',
            title:'Puchase Order Details',
            clicksToEdit:1,
    
            //to dislay paging toolbar
            bbar: new Ext.PagingToolbar({
                pageSize: 15,
                store: ds,
                displayInfo: true,
                plugins: filters
            })
        
        });
        ds.load({params:{start: 0, limit: 15}})
        grid.render();
        grid.on('afteredit', saveFormData);
        
    });

    Pleaaaaaaaaaaaseeeeeeeeeeeee reply soon

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    And it doesn't strike you as strange that you are creating the store before the reader it uses?

  7. #7
    Ext User
    Join Date
    Apr 2009
    Location
    India
    Posts
    15
    Vote Rating
    0
    riddhibhatia is on a distinguished road

      0  

    Default


    Hey, thanks a looooooooooot. U made me solve my problem....thanks a lot....hv a gr8 day!!

Thread Participants: 2