Extjs Editable Grid with grouping and paging

[riddhibhatia]

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:

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......

[bt_bruno]

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...

    

    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...

[riddhibhatia]

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......

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);
});

[Condor]

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.

[riddhibhatia]

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

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

[Condor]

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

[riddhibhatia]

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