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

Thread: Grid - Combo Store - Need to autoLoad and pass params

  1. #1
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Question Grid - Combo Store - Need to autoLoad and pass params

    Hi

    I have a editor grid and combo in one of the column. The combo data needs to be loaded from an URL.
    I need to pass params to the store and load the combo boxes after grid renders. Currently I am using "beforestartedit", however this works whenever I click on the cell, but not after grid loading.

    Please help me.

    PHP Code:
    this.colModel = new Ext.grid.ColumnModel({
        
    columns : [eType
            {
                
    dataIndex 'selectedLogType',
                
    hidden true
            
    }, {
                
    header 'System',
                
    dataIndex 'hostName',
                
    width 175
            
    }, {
                
    header 'ASUP',
                
    width 260,
                
    editable true,
                
    dataIndex 'asupRange',
                
    renderer : function(vmetarridxcidxstr) {
                    
    meta.attr 'ext:qtip="' eMessage '"';
                    var 
    returnStr "Select Date";
                    var 
    asupRange r.json.asupRange;
                    ...
                    ...
                    return 
    returnStr;
                },
                
    editor : new Ext.grid.GridEditor(new Ext.form.ComboBox({
                    
    store : new Ext.data.JsonStore({
                    
    url 'http://localhost/logview/asuprange',    
                
    autoLoad:false,
                    
    root:'asupRange',
                    
    method 'GET',
                    
    fields : [{name'asupDate'mapping'asupDate'type'date'dateFormat'U'},
                            
    'asupId''asupTitle''hostName']
                    }),
                    
    tpl'<tpl for="."><div class="search-item">' +
                        
    '<span>{asupDate:date("D M d Y, H:i T")}</span>' +
                        
    '{asupTitle}' +
                    
    '</div></tpl>',
                    
    displayField:'asupDate',
                    
    itemSelector'div.search-item',
                    
    editablefalse,
                    
    listWidth:500,
                    
    mode'remote',
                    
    triggerAction'all',
                    
    selectOnFocus:true,
                    
    listeners : {
                    
    select : function(cmborecordindex) {
                            var 
    rowIndex cmbo.rowIndex;
                            
    me.setSelectedLogType(record.jsonrowIndex);
                            
    me.loadLogTypes();
                        }
                    }
            }), {
            
    listeners : {
                                          
    //
                  
    beforestartedit : function(editor) {
                        var 
    combo editor.fieldrecord editor.record;
                        var 
    urlParams = {
                
    "sysId" :editor.record.json.sysId,
                
    "sn" editor.record.json.sn,
                
    "refasup"me.store.reader.jsonData.refAsupDetails.asupId,
                
    "proximateDate"me.store.reader.jsonData.refAsupDetails.asupDate
                
    };
                
    combo.store.load({"params":urlParams});
                
    combo.rowIndex editor.row;
                    },
                    
    single:true                        
            
    }
        })
    }]
    }); 
    Regards,
    Suresh
    Last edited by msuresh; 17 Feb 2011 at 5:45 AM. Reason: Explained with more details...

  2. #2
    Sencha User
    Join Date
    Aug 2009
    Location
    Austin, TX
    Posts
    100

    Default viewready

    Try the viewready event. I've found that is called when the grid has finished rendering and is completely displayed on the screen. If you set a mask on your grid then the grid will get masked with a message to the user that the grid is loading.

    hope that is what you were looking for...

  3. #3
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    "viewready" event is not for the editor.

    http://dev.sencha.com/deploy/dev/doc...eforestartedit

    Ext.Editor allows:
    1. beforestartedit
    2. startedit (editor is not the argument over here, so no use)
    3. beforecomplete
    4. complete
    5. canceledit
    6. specialkey

    We need to do some other work around to achieve this...

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Location
    Austin, TX
    Posts
    100

    Default

    I'm sorry, I assumed that you were talking about an EditorGridPanel since the title of your post says "Grid". My mistake. What about afterrender? There are many other events available to Ext.Editor that are inherited from Ext.Component.

  5. #5
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    No, not even "afterrender", even if I use those, I cant get the editor object as parameter which I need to pass values as params for the combo store url.

  6. #6
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    I tried to generate urlparams in renderer and tried to retrieve in editor, however I am unable to receive those urlparams. Any more ideas????

  7. #7
    Sencha User
    Join Date
    Aug 2009
    Location
    Austin, TX
    Posts
    100

    Default

    Do you know specifically which cells will have the editor? You can use the viewready event of the grid and then get the column model and call getCellEditor() on it. Something like this:

    Code:
    var grid = new Ext.grid.EditorGridPanel({
      ...
      cm: new Ext.grid.ColumnModel({
        ...
      }),
      listeners: {
        viewready: function(grid) {
          var editor = grid.getColumnModel().getCellEditor(3,0); // Gets editor of cell at column 3 row 0
          // plug in your combo load code here
        }
      }
    });
    I did not test the above code but maybe that gives you the right solution.

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The data is record (row) depended, so you can't just load the combobox store once on viewready. You will need to load it in beforestartedit.

    But since you are now loading the store in beforestartedit, you should configure the combobox with mode:'local' (local doesn't mean local data - it means don't load from remote).

    You could also leave the combobox on remote and in beforestartedit set the combobox store baseParams and delete the combobox.lastQuery property. This means it will start loading when expanded, which is probably better.

  9. #9
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    I added combo.store.load(); and delete combo.lastQuery;

    It didn't load all the combo store on each row dynamically. It started loading when I clicked on the cell.

    When I clicked on the SECOND ROW combobox cell, it was showing the data of the FIRST ROW combobox, after SECOND ROW store loaded, it re-painted the FIRST ROW data with SECOND ROW store data.

    How can we avoid this?

    PHP Code:
    beforestartedit : function(editor) {
        var 
    combo editor.fieldrecord editor.record;
        
    combo.id "combo"+editor.row;
        
    combo.rowIndex editor.row;
        
    combo.store.baseParams = {
            
    "sysId" editor.record.json.sysId,
            
    "sn" editor.record.json.sn,
            
    "refasup"me.store.reader.jsonData.refAsupDetails.asupId,
            
    "proximateDate"me.store.reader.jsonData.refAsupDetails.asupDate
        
    };
        
    combo.store.load(); //NEW
        
    combo.store.on('load', function(storerecordsoptions) {
            var 
    data store.reader.jsonData
            
    if (data.error == "true" && data.success == "false") {
                if (
    Ext.isDefined(data.msg)) {
                    
    combo.emptyText data.msg;        
                }
            }
        });
        
    delete combo.lastQuery;//NEW


  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    No, either load the store and use mode:'local' or don't load the store and clear lastQuery.

    You can't use the combobox store data in the column renderer if the store data is row dependent.

    You'll have to change your grid store so it holds all the information needed in the renderer.

Page 1 of 2 12 LastLast

Similar Threads

  1. Ext.Direct store create doesn't pass any params
    By 666ragez666 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Aug 2011, 11:16 AM
  2. Why my store can not pass params ?
    By daniel_82 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 9 Feb 2010, 2:05 PM
  3. Pass a value from Textfield to params
    By MacJK in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 May 2009, 12:04 AM
  4. Pass custom params on grid sort
    By fg1tr in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 8 Aug 2008, 4:58 AM
  5. pass params in url
    By ludhiana in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 15 May 2008, 7:17 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
  •