Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: How to reconfigure plugins of a grid

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default How to reconfigure plugins of a grid

    Hi,

    I am using the reconfigure method on my grid like this

    grid.reconfigure(store, colModel);

    this works well but according to the API the plugins have to be also reconfigured, but i can't find out how.

    I use the RowEditor plugin

    var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Save'
    });


    So how can i reconfigure this plugin for my grid ? I can't find a setter method in the api for setting the plugin of the grid with a new RowEditor instance. I appreciate all help.

    Thx

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488
    Vote Rating
    147
      0  

    Default

    The RowEditor plugin was designed to be intelligent enough to handle Grid reconfigurations. Are you having any problems after reconfiguring the grid?

    If so, could you please post the smallest showcase example that you can re-create so that we can take a look into it?

    Thanks,
    Aaron Conran
    @aconran

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default

    Yes, i have a problem after reconfiguring the grid. It's a little bit hard to explain for me, but i ll do my best:

    After reconfiguring the grid, i double click a row to edit this row. But right after the double click the fields of the row change to the values of a row that was clicked before the grid was reconfigured.

    Lets say for example that i have a person grid with 2 columns "firstname" and "lastname". in the first row the attributes are "steve" and "harrison". All goes well when i now doubleclick the row and edit the fields. After editing i reconfigure the grid with another store, which also have the same columns "firstname" and "lastname". Now when i click a row (firstname: "Sam", lastname: "jackson") to edit the fields, then "firstname" and "lastname" fields change to "steve" and "harrison" from the last grid (the grid before the reconfiguration) which is not correct.

    Some conde snippets:


    Here i reconfigure the store:
    Code:
    var grid = Ext.getCmp('edit-tables-grid');
    var store = changeGridStore(obj2.data.name);
    var colModel = new Ext.grid.ColumnModel([
            { id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
            { header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
    ]);
                            
    grid.reconfigure(store, colModel);
    store.reload();
    And here the grid initialization:
    Code:
    var editor = new Ext.ux.grid.RowEditor({
            saveText: 'Save'
    });
    
    var grid = new Ext.grid.GridPanel({
            store: store,
            width: 600,
            id: 'edit-tables-grid',
            region:'center',
            height: 350,
            editing: true,    
            style: 'margin: 20px 20px 20px 40px',
            cm: cm,
            //autoExpandColumn: 'en',
            plugins: [editor],
            view: new Ext.grid.GroupingView({
                markDirty: false
            }),
            tbar: [
            {
                icon: '/ext/examples/shared/icons/fam/add.gif',
                text: 'Add',
                handler: function(){
                    var e = new abuse({
                        EN: '',
                        SQ: '',
                        HR: '',
                        MK: '',
                        SR: '',
                        BS: ''
                    });
                    editor.stopEditing();    
                    count = store.getCount();
                    count = count++;
                    store.insert(count, e);
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(count);
                    editor.startEditing(count);
                }
            }]
        });
        
        editor.on({
          //scope: this,
          afteredit: function(roweditor, changes, record, rowIndex) {
                Ext.Ajax.request({
                  url: '/traffickers/change_table',
                  //method: record.phantom ? 'POST'   : 'PUT',
                  params: changes,
                  success: function() {
                       record.commit();    
                  },
                    failure: function() {
                    
                  }
                });
          }
        });
    Sorry for my english, i ll hope you will understand my problem.

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default

    any ideas? i am getting desperate

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488
    Vote Rating
    147
      0  

    Default

    Bringing up the roweditor reconfigures the grid?

    Could you create a complete example that we could troubleshoot?
    Aaron Conran
    @aconran

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default

    Hi,

    Sorry for the late answer. I post now all my methods related to the grid and its reconfiguration:

    This method creates the grid:

    Code:
    function getMaintenanceGrid(typeName) {
        
        var typeNameArray = typeName.match(/[A-Z][a-z]*/g);
        var jsonType = '';
        for (var i=0; i<typeNameArray.length-1; i++){
            jsonType += typeNameArray[i].toLowerCase()+'_'
        }
        jsonType += typeNameArray[typeNameArray.length-1].toLowerCase();
        
        var abuse = Ext.data.Record.create([{
            name: 'EN',
            type: 'string'
        },{
            name: 'SQ',
            type: 'string'
        },{
            name: 'HR',
            type: 'string'
        },{
            name: 'MK',
            type: 'string'
        },{
            name: 'SR',
            type: 'string'
        },{
            name: 'BS',
            type: 'string'
        }]);
    
        var endung = 's';
        var newType = jsonType;
        
        if (jsonType.charAt(jsonType.length-1) == 'x' || jsonType.charAt(jsonType.length-1) == 's')
            endung = 'es';
        else if (jsonType.charAt(jsonType.length-1) == 'y'){
            newType = newType.substr(0,newType.length-1);
            endung = 'ies';
        }
        jsonType = 'translation';
        
        var store = new Ext.data.GroupingStore({
            proxy: new Ext.data.HttpProxy({
                url: '/traffickers/get_table_values?type='+typeName,
                method: 'GET'
            }),
            reader: new Ext.data.JsonReader({
                //root: newType+endung,
                root: 'translations',
                idProperty: 'd',
                totalProperty: 'results'
            },
            [  
                { name: 'id', mapping: 'translation.id' }, 
                { name: 'en', mapping: jsonType+'.EN' },
                { name: 'sq', mapping: jsonType+'.SQ' },
                { name: 'hr', mapping: jsonType+'.HR' },
                { name: 'mk', mapping: jsonType+'.MK' },
                { name: 'sr', mapping: jsonType+'.SR' },
                { name: 'bs', mapping: jsonType+'.BS' }
            ]),
            autoLoad: true,
        });
        store.load();
        var editor = new Ext.ux.grid.RowEditor({
            saveText: 'Save'
        });
    
        var cm = new Ext.grid.ColumnModel([
        { id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
             //{ id: 'label', header: 'Label', dataIndex: 'label', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false }}
            { header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
            { header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
      ]);
    
        var grid = new Ext.grid.GridPanel({
            store: store,
            width: 600,
            id: 'edit-tables-grid',
            region:'center',
            height: 350,
            editing: true,    
            style: 'margin: 20px 20px 20px 40px',
            cm: cm,
            //autoExpandColumn: 'en',
            plugins: [editor],
            view: new Ext.grid.GroupingView({
                markDirty: false    
            }),
            tbar: [
            {
                icon: '/ext/examples/shared/icons/fam/add.gif',
                text: 'Add',
                handler: function(){
                    var e = new abuse({
                        EN: '',
                        SQ: '',
                        HR: '',
                        MK: '',
                        SR: '',
                        BS: ''
                    });
                    editor.stopEditing();    
                    count = store.getCount();
                    count = count++;
                    store.insert(count, e);
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(count);
                    editor.startEditing(count);
                }
            }]
        });
        
        editor.on({
          //scope: this,
          afteredit: function(roweditor, changes, record, rowIndex) {
                var id = 0
                if (record.json != null) {
                    id = record.json.translation.id
                }
                Ext.Ajax.request({
                  url: '/traffickers/change_table?type='+typeName+'&id=' + id,
                  //method: record.phantom ? 'POST'   : 'PUT',
                  params: changes,
                  success: function() {
                       record.commit();    
                  },
                    failure: function() {
                    
                  }
                });
          }
        });
      
        return grid;
    };
    This method loades the new store for the grid:
    Code:
    function changeGridStore(typeName) {
    
        var store = new Ext.data.GroupingStore({
            proxy: new Ext.data.HttpProxy({
              url: '/traffickers/get_table_values?type='+typeName,
                method: 'GET'
          }),
          reader: new Ext.data.JsonReader({
              //root: newType+endung,
                root: 'translations',
                idProperty: 'd',    
            totalProperty: 'results'
           },[   
                { name: 'en', mapping: jsonType+'.EN' },
                { name: 'sq', mapping: jsonType+'.SQ' },
                { name: 'hr', mapping: jsonType+'.HR' },
                { name: 'mk', mapping: jsonType+'.MK' },
                { name: 'sr', mapping: jsonType+'.SR' },
                { name: 'bs', mapping: jsonType+'.BS' }
          ]),
            autoLoad: true,
         });
      
        return store;
    }
    This method reconfigures the grid whenever a value is selected by the user:
    Code:
    function getMaintenanceCombo() {
        
        var comboBox = new Ext.form.ComboBox({
            fieldLabel: 'Trafficker Tables',
            id: 'tdatabase-tables',
            name: 'tdatabase_tables',
            typeAhead: true,
            mode: 'local',
            forceSelection: true,
            selectOnFocus:true,
            displayField: 'name',
            allowBlank:true,
            store: databaseTables,
            triggerAction: 'all',
            value: 'AbusePerpetrator',
            listeners: { 
                    select: function(obj, obj2, value){ 
                            var grid = Ext.getCmp('edit-tables-grid');
                            var store = changeGridStore(obj2.data.name);
                            var colModel = new Ext.grid.ColumnModel([
                              { id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
                                 //{ id: 'label', header: 'Label', dataIndex: 'label', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false }}
                                { header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
                                { header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
                                { header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
                                { header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
                                { header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
                                { header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
                             ]);
                            store.reload();
                            grid.reconfigure(store, colModel);
                            
                            //store.reload();
                    }
             }
        });
        
        var panel = new Ext.Panel({
            name: 'combo-table-panel',
            style: {
                marginTop: '20px',
                marginLeft: '20px'
            },
            items: comboBox,
        })
        
        
        return panel;
    };
    This is all my code related to the grid and its configuration.

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default

    i am still hoping for some help

  8. #8
    Sencha User
    Join Date
    Oct 2007
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by hadi78 View Post
    i am still hoping for some help
    Have you solved? I got problems with row editor and "reconfigure" too.
    http://www.extjs.com/forum/showthread.php?p=413944

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Posts
    57
    Vote Rating
    -1
      0  

    Default

    No sorry, nobody is willing to help

  10. #10
    Ext User
    Join Date
    Oct 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Get a same problem too.

    Anyone please help.

Page 1 of 2 12 LastLast

Posting Permissions

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