Results 1 to 9 of 9

Thread: Need to reload (rerender?) grids inside of a window

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
      0  

    Exclamation Need to reload (rerender?) grids inside of a window

    I have one main grid that allows you to click a button in the tbar and initiate the function below. When the button is clicked a window pops up with two more grids allowing you to drag and drop back and forth between the grids. Everything works great the first time; however, the second time when the window is unhidden the same two grids are still there with the same data and nothing is refreshed...

    Basically I am passing an id based on whatever selection is made on whatever row in the main grid. This id loads different data from two different stores, one for each drag and drop grid.

    Is there a way to destroy the window and render it again so it does not hold on to those grids?... or a way to close it?...because just hiding it is not getting the job done and is where I believe my problem is.... I'm trying to pull unique data every time the tbar button in the main grid is clicked.

    Your help is much appreciated!


    PHP Code:
            var buildDragDropGrids = function(item) {
                
                
                    var 
    sel groupsgrid.getSelectionModel().getSelected();
                    var 
    selIndex allgroups.indexOf(sel);
                    var 
    seldata=sel.data;            
                    var 
    currentgroup_id seldata.group_id;

                

                 
    myRecordObj Ext.data.Record.create([

                {
    nameprimaryKey},//this corresponds to 'contact_id', I assigned a
                                   //variable to this value since it is used
                                   //multiple times throughout this code (see the
                                   //Private Variable definitions)
                
    {name'contact_mobile'mapping'contact_mobile'sortDir'ASC'sortType'asUCString'},
                
    /**
                 * I've noticed the sorting is questionable when using paging.  For
                 * example, if the record spans multiple pages, the contact_mobile "3M" doesn't
                 * show up first.  If all records are loaded into a single page view
                 * then "3M" shows up at the top of the ASC sorted column.
                 */
                
    {name'contact_fname'},
                {
    name'contact_lname'}
                
                
            ]);

         
            
    myReader = new Ext.data.JsonReader//creates array from JSON response
            
    {
                
    root'results'//delimiter tag for each record (row of data)
                
    totalProperty'total',//element containing total dataset size (opt 
                
    idprimaryKey //used several times so a Private Variable is used

            
    },

                
    myRecordObj//pass a reference to the object 
            
    );
            

            
    currentcontacts = new Ext.data.GroupingStore({ //if grouping
                
    proxy: new Ext.data.HttpProxy({
                    
    url'groupcontacts.php'//url to data object (server side script)
                    
    method'POST'
                
    }),   
                
    baseParams:{task"readContacts"whichGroup:currentgroup_id},
                
    readermyReader,
                
    //groupField:'Groups', //added for GroupingStore, specifies initial group sort
                
    sortInfo:{field'contact_mobile'direction"ASC"}
                
    //remoteSort: true,//true if sort from server (false = sort from cache only)
            
    });//end currentcontacts        


                 
    myRecordObjTwo Ext.data.Record.create([

                {
    nameprimaryKey},//this corresponds to 'contact_id', I assigned a
                                   //variable to this value since it is used
                                   //multiple times throughout this code (see the
                                   //Private Variable definitions)
                
    {name'contact_mobile'mapping'contact_mobile'sortDir'ASC'sortType'asUCString'},
                
    /**
                 * I've noticed the sorting is questionable when using paging.  For
                 * example, if the record spans multiple pages, the contact_mobile "3M" doesn't
                 * show up first.  If all records are loaded into a single page view
                 * then "3M" shows up at the top of the ASC sorted column.
                 */
                
    {name'contact_fname'},
                {
    name'contact_lname'}
            ]);

         
            
    myReaderTwo = new Ext.data.JsonReader//creates array from JSON response
            
    {
                
    root'results'//delimiter tag for each record (row of data)
                
    totalProperty'total',//element containing total dataset size (opt 
                
    idprimaryKey //used several times so a Private Variable is used

            
    },

                
    myRecordObjTwo//pass a reference to the object 
            
    );
            

            
    availablecontacts = new Ext.data.GroupingStore({ //if grouping
                
    proxy: new Ext.data.HttpProxy({
                    
    url'groupcontacts.php'//url to data object (server side script)
                    
    method'POST'
                
    }),   
                
    baseParams:{task"readAvailableContacts"whichGroup:currentgroup_id},
                
    readermyReaderTwo,
                
    //groupField:'Groups', //added for GroupingStore, specifies initial group sort
                
    sortInfo:{field'contact_mobile'direction"ASC"}
                
    //remoteSort: true,//true if sort from server (false = sort from cache only)
            
    });//end currentcontacts        


            
    currentcontacts.load({
                
    params: { //this is only parameters for the FIRST page load,
                          //use baseParams above for ALL pages.
                    
    start0//pass start/limit parameters for paging
                    
    limitAPP.groupsModule.perPage//
                
    }
            }); 
            
    availablecontacts.load({
                
    params: { //this is only parameters for the FIRST page load,
                          //use baseParams above for ALL pages.
                    
    start0//pass start/limit parameters for paging
                    
    limitAPP.groupsModule.perPage//
                
    }
            });    

            
                
        var 
    getColumnModel = function(){
            if(!
    colModel) { //only need to create columnModel if it doesn't already exist        
                                    
                
    colModel = new Ext.grid.ColumnModel([ //instantiate ColumnModel
                    
    new Ext.grid.RowNumberer(),
                     {                         
                        
    dataIndex'contact_mobile',
                        
    header:"Mobile",
                        
    id:    'classcontact_mobile',
                        
    sortabletrue,
                            
                    },{                         
                        
    dataIndex'contact_fname',
                        
    header"First Name"
                        
    sortabletrue,

                    },{                         
                        
    dataIndex'contact_lname',
                        
    header"Last Name"
                        
    sortabletrue,

                    }
                    
                ]);
    //end colModel

            
    }//end of colModel
            
            
    return colModel;//if colModel already exists return it
            
        
    }//end getColumnModel
        
        
    var getColumnModelTwo = function(){
            if(!
    colModelTwo) { //only need to create columnModel if it doesn't already exist        
                                    
                
    colModelTwo = new Ext.grid.ColumnModel([ //instantiate ColumnModel
                    
    new Ext.grid.RowNumberer(),
                     {                         
                        
    dataIndex'contact_mobile',
                        
    header:"Mobile",
                        
    id:    'classcontact_mobile',
                        
    sortabletrue,
                            
                    },{                         
                        
    dataIndex'contact_fname',
                        
    header"First Name"
                        
    sortabletrue,

                    },{                         
                        
    dataIndex'contact_lname',
                        
    header"Last Name"
                        
    sortabletrue,

                    }
                    
                ]);
    //end colModel


            
    }//end of colModelTwo
            
            
    return colModelTwo;//if colModel already exists return it
            
        
    }//end getColumnModelTwo    
                
                
                    
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //these to grids are for the drag and drop when editing a group


            
    gridone = new Ext.grid.GridPanel({ 
                
    autoExpandColumn'contact_mobile'
                
    colModelgetColumnModel(), 
                
    ddGroup          'DDGroup',
                
    enableDragDrop   true,
                
    height:330,//you must specify height or autoHeight
                
    loadMasktrue,//use true to mask the grid while loading (default = false)
                
    plugins: [
                    new 
    Ext.ux.grid.GridFilters({

                    
    local:true,//specify true if you want to filter client side
                    
                    
    filters:[
                        {
    dataIndex'contact_mobile'type'string'},
                        {
    dataIndex'contact_fname'type'string'},
                        {
    dataIndex'contact_lname'type'string'}
                    ]
                }),
                ],
                
    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//true to limit row selection to 1 row})
                
    storecurrentcontacts,       //the DataStore object to use (currentcontacts: is shorthand)
                
    stripeRowstrue,//applies css classname to alternate rows, defaults to false
                
    title:'Current Contacts - (Drag and drop right)',
                
    trackMouseOvertrue,
                
    width:420,
                
    //Add a bottom bar      
                
    bbar: new Ext.PagingToolbar({
                    
    plugins: [
                    new 
    Ext.ux.grid.GridFilters({

                    
    local:true,//specify true if you want to filter client side
                    
                    
    filters:[
                        {
    dataIndex'contact_mobile'type'string'},
                        {
    dataIndex'contact_fname'type'string'},
                        {
    dataIndex'contact_lname'type'string'}
                    ]
                }),
                ],
                    
    pageSizeAPP.groupsModule.perPage,//default is 20
                    
    storecurrentcontacts,
                    
    displayInfotrue,//default is false (to not show displayMsg)
                    
    displayMsg'{0} - {1} of {2}',
                    
    afterText'Records',
                    
    emptyMsg"No data to display",//display message when no records found
                    
    items:[
                        
    '-', {
                        
                    }]
                }),         
                
                
    //this is the key to showing the GroupingStore
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    //custom grouping text template to display the number of
                    //items per group
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })        
                
                
            });
    //end grid

                
                
    gridtwo = new Ext.grid.GridPanel({ 
                
    autoExpandColumn'contact_mobile'
                
    colModelgetColumnModelTwo(), //gets the ColumnModel object to use (cm: is shorthand)
                
    ddGroup          'DDGroupTwo',
                
    enableDragDrop   true,
                
    height:330,//you must specify height or autoHeight
                
    loadMasktrue,//use true to mask the grid while loading (default = false)
                
    plugins: [
                    new 
    Ext.ux.grid.GridFilters({

                    
    local:true,//specify true if you want to filter client side
                    
                    
    filters:[
                        {
    dataIndex'contact_mobile'type'string'},
                        {
    dataIndex'contact_fname'type'string'},
                        {
    dataIndex'contact_lname'type'string'}
                    ]
                }),
                ],
                
    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//true to limit row selection to 1 row})
                
    storeavailablecontacts,       //the DataStore object to use (ds: is shorthand)
                
    stripeRowstrue,//applies css classname to alternate rows, defaults to false
                
    title:'Available Contacts - (Drag and drop left)',
                
    trackMouseOvertrue,
                
    width:420,
                
    //Add a bottom bar      
                
    bbar: new Ext.PagingToolbar({
                    
    plugins: [
                    new 
    Ext.ux.grid.GridFilters({

                    
    local:true,//specify true if you want to filter client side
                    
                    
    filters:[
                        {
    dataIndex'contact_mobile'type'string'},
                        {
    dataIndex'contact_fname'type'string'},
                        {
    dataIndex'contact_lname'type'string'}
                    ]
                }),
                ],
                    
    pageSizeAPP.groupsModule.perPage,//default is 20
                    
    storeavailablecontacts,
                    
    displayInfotrue,//default is false (to not show displayMsg)
                    
    displayMsg'{0} - {1} of {2}',
                    
    afterText'Records',
                    
    emptyMsg"No data to display",//display message when no records found
                    
    items:[
                        
    '-', {
                        
                    }]
                }),        
                            
                
    //this is the key to showing the GroupingStore
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    //custom grouping text template to display the number of
                    //items per group
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })        
                
                
            });
    //end grid
        
                
                
    if(!editwin){
                    
    editwin = new Ext.Window({
                        
    applyTo:'window-contactgroups',
                        
    id'draganddropwindow',
                        
    width:855,
                        
    height:350,
                        
    closeAction:'hide',
                        
    plaintrue,
                        
    layout'hbox',
                        
    defaults: { flex }, //auto stretch
                        
    layoutConfig: { align 'stretch' },
                        
    items: [gridone,gridtwo],

                        
    buttons: [{
                            
    text'Close',
                            
    handler: function(){
                                
    editwin.hide();
                                
    allgroups.reload();
                            }
                        }]
                    });        
                            
        }
    //end editwin !if check    
        
            // This will make sure we only drop to the  view scroller element
            
    var firstGridDropTargetEl =  gridone.getView().scroller.dom;
            var 
    firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
                    
    ddGroup    'DDGroupTwo',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows gridtwo.selModel.selections.items;                
                        var 
    selectedKeys gridtwo.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);
                        
                        
    //submit to server
                    
    Ext.Ajax.request//alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
                        
    {   //specify options (note success/failure below that receives these same options)
                            
    waitMsg'Saving changes...',
                            
    //url where to send request (url to server side script)
                            
    url'groupcontacts.php',
                            
                            
    //params will be available via $_POST or $_REQUEST:
                            
    params: { 
                                
    task"addContactToGroup"//pass task to do to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id' that the reader used
                            
    }
                                                        
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization
                        
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.removeddSource.grid.store);
                            
    gridone.store.add(records);
                            
    gridone.store.sort('contact_mobile''ASC');
                            
    availablecontacts.reload();
                            return 
    true
                    
    }                    
                      
            });
            


            
    // This will make sure we only drop to the view scroller element
            
    var secondGridDropTargetEl gridtwo.getView().scroller.dom;
            var 
    secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
                    
    ddGroup    'DDGroup',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows gridone.selModel.selections.items;                
                        var 
    selectedKeys gridone.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);
                        
                        
    //submit to server
                    
    Ext.Ajax.request//alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
                        
    {   //specify options (note success/failure below that receives these same options)
                            
    waitMsg'Saving changes...',
                            
    //url where to send request (url to server side script)
                            
    url'groupcontacts.php',
                            
                            
    //params will be available via $_POST or $_REQUEST:
                            
    params: { 
                                
    task"removeContactFromGroup"//pass task to do to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id' that the reader used
                            
    }
                                                        
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization
                        
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.removeddSource.grid.store);
                            
    gridtwo.store.add(records);
                            
    gridtwo.store.sort('contact_mobile''ASC');
                            
    currentcontacts.reload();
                            return 
    true
                    
    }
            });
                
                
    editwin.show(this);
        
        } 

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    closeAction:'hide' is the culprit. You want to recreate the window every time, not hide and show the same one.

    I think you want closeAction:'close' and your close button needs to do editwin.close().

    I'm not sure how your if(!editwin) is going to work out. You may have to go: var editWin = Ext.getCmp('draganddropwindow') before your if statement. Also it's a truthy-ness compare you might be better off asking if it's undefined like Ext.isDefined(editWin).

    Hope something helped.

    Good day.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
      0  

    Default

    darthwes,

    I'm not sure why I would even need an if(!editwin) statement or any other if I am closing the window... doesn't the window get removed from DOM and render itself again regardless? I did still try it with a variety of statements all giving me an error...

    When I don't run any statements around the window creation process it works fine the first time, but when I go to call the function again that builds the grids and renders the window I get this error:

    this.el is null
    this.render(this.el.dom.parentNode);

    Any ideas?

  4. #4
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    You might have a scope issue, you may need a closure. Your code's so much I can't just suck it all in in one viewing. Can you condense it down into a small code snippet that produces the same problems? If you do that I'll beat on the code and see if I can figure it out.

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
      0  

    Default

    darthwes,

    I truncated it as much as I could by stripping out tbars and bbars as well as plugins...I took out the function to build the colmodels as well, but that can be reference in my first post.... I just left the necessary things in there... I don't think I can take anymore out of it from here:

    PHP Code:
    var buildDragDropGrids = function(item) {            
                
                    var 
    sel groupsgrid.getSelectionModel().getSelected();
                    var 
    selIndex allgroups.indexOf(sel);
                    var 
    seldata=sel.data;            
                    var 
    currentgroup_id seldata.group_id;            

                 
    myRecordObj Ext.data.Record.create([
                {
    nameprimaryKey},
                {
    name'contact_mobile'mapping'contact_mobile'sortDir'ASC'sortType'asUCString'},
                {
    name'contact_fname'},
                {
    name'contact_lname'}            
                
            ]);     
            
    myReader = new Ext.data.JsonReader//creates array from JSON response
            
    {
                
    root'results'//delimiter tag for each record (row of data)
                
    totalProperty'total',//element containing total dataset size (opt 
                
    idprimaryKey //used several times so a Private Variable is used

            
    },
                
    myRecordObj//pass a reference to the object 
            
    );
            
    currentcontacts = new Ext.data.GroupingStore({ //if grouping
                
    proxy: new Ext.data.HttpProxy({
                    
    url'groupcontacts.php'//url to data object (server side script)
                    
    method'POST'
                
    }),   
                
    baseParams:{task"readContacts"whichGroup:currentgroup_id},
                
    readermyReader,
                
    sortInfo:{field'contact_mobile'direction"ASC"}
            });
    //end currentcontacts        

                 
    myRecordObjTwo Ext.data.Record.create([
                {
    nameprimaryKey},
                {
    name'contact_mobile'mapping'contact_mobile'sortDir'ASC'sortType'asUCString'},
                {
    name'contact_fname'},
                {
    name'contact_lname'}
            ]);
         
            
    myReaderTwo = new Ext.data.JsonReader//creates array from JSON response
            
    {
                
    root'results'//delimiter tag for each record (row of data)
                
    totalProperty'total',//element containing total dataset size (opt 
                
    idprimaryKey //used several times so a Private Variable is used

            
    },
                
    myRecordObjTwo//pass a reference to the object 
            
    );        

            
    availablecontacts = new Ext.data.GroupingStore({ //if grouping
                
    proxy: new Ext.data.HttpProxy({
                    
    url'groupcontacts.php'//url to data object (server side script)
                    
    method'POST'
                
    }),   
                
    baseParams:{task"readAvailableContacts"whichGroup:currentgroup_id},
                
    readermyReaderTwo,
                
    sortInfo:{field'contact_mobile'direction"ASC"}
            });
    //end currentcontacts    

            
    currentcontacts.load({
                
    params: { 
                    
    start0,
                    
    limitAPP.groupsModule.perPage
                
    }
            }); 
            
    availablecontacts.load({
                
    params: { 
                    
    start0
                    
    limitAPP.groupsModule.perPage
                
    }
            });    


            
    gridone = new Ext.grid.GridPanel({ 
                
    autoExpandColumn'contact_mobile'
                
    colModelgetColumnModel(),
                
    ddGroup          'DDGroup',
                
    enableDragDrop   true,
                
    height:330,
                
    loadMasktrue,
                
    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
                
    storecurrentcontacts,
                
    stripeRowstrue,
                
    title:'Current Contacts - (Drag and drop right)',
                
    trackMouseOvertrue,
                
    width:420,        
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })    
                
            });
    //end grid

                
    gridtwo = new Ext.grid.GridPanel({ 
                
    autoExpandColumn'contact_mobile'
                
    colModelgetColumnModelTwo(), 
                
    ddGroup          'DDGroupTwo',
                
    enableDragDrop   true,
                
    height:330,
                
    loadMasktrue,
                
    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
                
    storeavailablecontacts,
                
    stripeRowstrue,
                
    title:'Available Contacts - (Drag and drop left)',
                
    trackMouseOvertrue,
                
    width:420,
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })                
                
            });
    //end grid
            
                    
    editwin = new Ext.Window({
                        
    applyTo:'window-contactgroups',
                        
    id'draganddropwindow',
                        
    width:855,
                        
    height:350,
                        
    closeAction:'close',
                        
    plaintrue,
                        
    layout'hbox',
                        
    defaults: { flex }, //auto stretch
                        
    layoutConfig: { align 'stretch' },
                        
    items: [gridone,gridtwo],

                        
    buttons: [{
                            
    text'Close',
                            
    handler: function(){
                                
    editwin.close();
                                
    allgroups.reload();
                            }
                        }]
                    });    
            
    ///////////////////////////Drag and Drop functionality - after grids are rendered        
            // This will make sure we only drop to the  view scroller element
            
    var firstGridDropTargetEl =  gridone.getView().scroller.dom;
            var 
    firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
                    
    ddGroup    'DDGroupTwo',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows gridtwo.selModel.selections.items;                
                        var 
    selectedKeys gridtwo.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);                    
                    
    Ext.Ajax.request
                        {   
                            
    waitMsg'Saving changes...',
                            
    url'groupcontacts.php',
                            
    params: { 
                                
    task"addContactToGroup"//pass task to do to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id' that the reader used
                            
    }                                                    
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization
                        
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.removeddSource.grid.store);
                            
    gridone.store.add(records);
                            
    gridone.store.sort('contact_mobile''ASC');
                            
    availablecontacts.reload();
                            return 
    true
                    
    }
            });

            
    // This will make sure we only drop to the view scroller element
            
    var secondGridDropTargetEl gridtwo.getView().scroller.dom;
            var 
    secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
                    
    ddGroup    'DDGroup',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows gridone.selModel.selections.items;                
                        var 
    selectedKeys gridone.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);

                    
    Ext.Ajax.request
                        {  
                            
    waitMsg'Saving changes...',
                            
    url'groupcontacts.php',
                            
    params: { 
                                
    task"removeContactFromGroup"//pass task to do to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id' that the reader used
                            
    }                                                    
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization                    
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.removeddSource.grid.store);
                            
    gridtwo.store.add(records);
                            
    gridtwo.store.sort('contact_mobile''ASC');
                            
    currentcontacts.reload();
                            return 
    true
                    
    }
            });
                
    editwin.show(this);    
        }
    //end build drag and drop grids 
    Basically the process of what is left is as follows:
    1. Grab the currentgroup_id which is passed from the row of the main grid that initiates this function
    2. Build record object 1, store 1 and reader 1
    3. Build record object 2, store 2 and reader 2
    4. Build gridone
    5. Build gridtwo
    6. Build the popup window to house the grids
    7. Add drag and drop functionality between grids
    Thanks a lot for your help it is much appreciated!

  6. #6
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    OK! Here's my advice. Get rid of the applyTo property on the edit panel. What are you doing with an applyTo? That'll fix ya right up...Unless you have for unknown reasons been abducted by aliens and are being forced to use the applyTo property, please let us know if that helps!

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Why are you reconstructing the two grids if you are reusing the window?

    1. Construct both the grids and the window only once. If the window already exists, you only need to load the grid stores and show the window.
    2. To reuse the window you need to hide() instead of close() it in your Close button handler. You've already set closeAction:'hide', so the [X] tool will hide instead of close the window.

  8. #8
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    Right, I totally blanked out on this one. Call buildDragDropGrids() once. Use hide. When you want to show it again do:

    Code:
    handler: function () {
        var editwin = Ext.getCmp('draganddropwindow');
        editwin.show();
    }
    Now you have need to reload the grids when you re-show. You can do

    Code:
    var editgrid = ...
    listeners: {
    	show: function () {
    		currentcontacts.load({
    			params: {
    				start: 0,
    				limit: APP.groupsModule.perPage
    			}
    		});
    		availablecontacts.load({
    			params: {
    				start: 0,
    				limit: APP.groupsModule.perPage
    			}
    		});
    	}
    },
    That'll make your examples work. If you do that you can remove your inital store.load calls (before the definition of the editgrid).

    Thanks Condor!

    Hope we provided some help!

  9. #9
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
      0  

    Default

    You guys are awesome! Thanks a lot for your help, I've got everything working now. I had to do a few more modifications and figured I would share them for anyone who runs across the same issue. I still had to pass a fresh currentgroup_id each time so my window code looks like this:
    PHP Code:
     if(!editwin){
                    
    editwin = new Ext.Window({
                        
    applyTo:'window-contactgroups',
                        
    id'draganddropwindow',
                        
    width:855,
                        
    height:350,
                        
    closeAction:'hide',
                        
    plaintrue,
                        
    layout'hbox',
                        
    defaults: { flex }, //auto stretch
                        
    layoutConfig: { align 'stretch' },
                        
    items: [gridone,gridtwo],
                        
    listeners: {
                            
    show: function () {
                                var 
    sel =  groupsgrid.getSelectionModel().getSelected();
                                var 
    selIndex allgroups.indexOf(sel);
                                   var 
    seldata=sel.data;            
                                var 
    currentgroup_id seldata.group_id;
                    

                                
    currentcontacts.load({
                                    
    params: {
                                        
    task"readContacts",
                                        
    whichGroup:currentgroup_id,
                                        
    start0,
                                        
    limitAPP.groupsModule.perPage
                                    
    }
                                });
                                
    availablecontacts.load({
                                    
    params: {
                                        
    start0,
                                        
    task"readAvailableContacts",
                                        
    whichGroup:currentgroup_id,
                                        
    limitAPP.groupsModule.perPage
                                    
    }
                                });
                            }
                        },
                        
    buttons: [{
                            
    text'Close',
                            
    handler: function(){
                                
    editwin.hide();
                                
    allgroups.reload();
                            }
                        }]
                    });        
                            
        }
    //end editwin !if check 
    I also had to do the same for drag and drop so that worked, that code looks like this:
    PHP Code:
    var firstGridDropTargetEl =  gridone.getView().scroller.dom;
            var 
    firstGridDropTarget = new  Ext.dd.DropTarget(firstGridDropTargetEl, {
                    
    ddGroup    'DDGroupTwo',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows =  gridtwo.selModel.selections.items;                
                        var 
    selectedKeys gridtwo.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);
                        
                        var 
    sel =  groupsgrid.getSelectionModel().getSelected();
                        var 
    selIndex allgroups.indexOf(sel);
                           var 
    seldata=sel.data;            
                        var 
    currentgroup_id seldata.group_id;
                        
                        
    //submit to server
                    
    Ext.Ajax.request//alternative to Ext.form.FormPanel?  or Ext.BasicForm.submit
                        
    {   //specify options (note success/failure below  that receives these same options)
                            
    waitMsg'Saving changes...',
                            
    //url where to send request (url to server side  script)
                            
    url'groupcontacts.php',
                            
                            
    //params will be available via $_POST or  $_REQUEST:
                            
    params: { 
                                
    task"addContactToGroup"//pass task to do  to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id'  that the reader used
                            
    }
                                                        
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization
                        
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.remove,  ddSource.grid.store);
                            
    gridone.store.add(records);
                            
    gridone.store.sort('contact_mobile''ASC');
                            
    availablecontacts.reload();
                            return 
    true
                    
    }                    
                      
            });
            


            
    // This will make sure we only drop to the view scroller element
            
    var secondGridDropTargetEl gridtwo.getView().scroller.dom;
            var 
    secondGridDropTarget = new  Ext.dd.DropTarget(secondGridDropTargetEl, {
                    
    ddGroup    'DDGroup',
                    
    notifyDrop : function(ddSourceedata){
                        var 
    selectedRows =  gridone.selModel.selections.items;                
                        var 
    selectedKeys gridone.selModel.selections.keys;
                        var 
    encoded_keys Ext.encode(selectedKeys);
                        
                        var 
    sel =  groupsgrid.getSelectionModel().getSelected();
                        var 
    selIndex allgroups.indexOf(sel);
                           var 
    seldata=sel.data;            
                        var 
    currentgroup_id seldata.group_id;
                        
                        
    //submit to server
                    
    Ext.Ajax.request//alternative to Ext.form.FormPanel?  or Ext.BasicForm.submit
                        
    {   //specify options (note success/failure below  that receives these same options)
                            
    waitMsg'Saving changes...',
                            
    //url where to send request (url to server side  script)
                            
    url'groupcontacts.php',
                            
                            
    //params will be available via $_POST or  $_REQUEST:
                            
    params: { 
                                
    task"removeContactFromGroup"//pass task  to do to the server script
                                
    contact_idencoded_keys,//the unique id(s)
                                
    whichGroupcurrentgroup_id,
                                
    keyprimaryKey//pass to server same 'id'  that the reader used
                            
    }
                                                        
                         } 
    //end Ajax request config
                    
    );// end Ajax request initialization
                        
                        
    var records =  ddSource.dragData.selections;
                            
    Ext.each(recordsddSource.grid.store.remove,  ddSource.grid.store);
                            
    gridtwo.store.add(records);
                            
    gridtwo.store.sort('contact_mobile''ASC');
                            
    currentcontacts.reload();
                            return 
    true
                    
    }
            }); 
    Once again thanks a lot guys!

Similar Threads

  1. How to reRender/refresh/reload ViewPort?
    By jzafrilla in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 9 Jun 2010, 2:46 AM
  2. rerender a menu thats inside a container
    By realjax in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 29 Jan 2010, 9:05 AM
  3. How to refresh/reload/reRender a image component
    By Hemant Bob in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 2 Oct 2009, 1:34 PM
  4. Grids inside accordion
    By fxmisticat in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 11 Dec 2008, 6:18 AM
  5. Show() doesn't rerender window after close() is called
    By bluesapphire in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 18 Aug 2008, 5:23 AM

Tags for this Thread

Posting Permissions

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