1. #1
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Thumbs up [Solved] Dynamically Load Content Into Dialog

    [Solved] Dynamically Load Content Into Dialog


    When a user clicks a cell in a grid I open up a dialog. What I would like to do is use the setURL method to dynamically load the content into the panels. The below is a snipet of code. What is the best method to apply the setURL to individuals panels so I can populate/load each tab with dynamic data (from a url)?

    Code:
     
    var layout = dialog.getLayout();
    layout.beginUpdate();
    layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
    layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
    // generate some other tabs
    layout.add('center', new Ext.ContentPanel(Ext.id(), {
       autoCreate:true, title: 'Another Tab', background:true}));
    layout.add('center', new Ext.ContentPanel(Ext.id(), {
       autoCreate:true, title: 'Third Tab', closable:true, background:true}));
    layout.endUpdate();

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Save a ref to each CP as you add it to the layout. You can then call setUrl on each one (or load, passing all the parms). You could also pass setUrl as a config to each CP.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    12
    Vote Rating
    0
    riverside is on a distinguished road

      0  

    Default


    Take a look at next code, it working in the part that execute server code (someURL.php) with passed parameters (id) and return the result in the 'center' tab. The problem is that no matter which row of my grid I clicked on, below code return the same results, and exactly the data referred to the last grid's row!?
    Code:
                            var layout = dialog.getLayout();
                            layout.beginUpdate();
                            layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
    			var c = new Ext.ContentPanel('center', {title: 'Center Tab'});
                            c.load({
    				url: 'someURL.php',
    				params: {id: dataStore.data.items[rowIndex].id},
    				text: 'Loading...'
    			})
    			layout.add('center', c);
                            layout.endUpdate();
    I suppose that my mistake is here:
    Code:
    				params: {id: dataStore.data.items[rowIndex].id},
    Is someone of you know how to fix above?

    Thanks in advance,

  4. #4
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    This works...

    Code:
     
    var layout = dialog.getLayout();
    var eoxPanel= new Ext.ContentPanel(Ext.id(), 
       { autoCreate:true, background:true, title: 'EoL/EoX', closable: false });
    var historyPanel= new Ext.ContentPanel(Ext.id(), 
       { autoCreate:true, background:true, title: 'History', closable: false });
    layout.beginUpdate();
    layout.add('west', new Ext.ContentPanel('west', {title: 'Part QWRRTRS-WWERWE',url: '../default.php'}));             
    layout.add('center', eoxPanel); 
    layout.add('center', historyPanel);
    eoxPanel.setUrl({ url: '../default.php', scripts: true});
    historyPanel.setUrl({ url: '../default.php', scripts: true});           
    layout.endUpdate();

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    12
    Vote Rating
    0
    riverside is on a distinguished road

      0  

    Default


    Yes, @cluettr, it works.

    But now I need to pass unique row id from the grid to the .php file.
    To do this I have to use params

    Code:
    eoxPanel.setUrl({ url: '../default.php', params: {id: 156}});
    The problem is that I can't find out how to get value of id from selected grid' row!?

  6. #6
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Yes, I too have no idea how to get the value of a cell of a selected or clicked row. The examples within posts are weak at best. I'm hoping someone can provide us a good example.

  7. #7
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Found a post that describes exactly how to do this:

    http://extjs.com/forum/showthread.ph...ell+value+grid

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default


    does the php need to generate a json format data or can it be html?
    thanks!

    Quote Originally Posted by cluettr View Post
    This works...

    Code:
     
    var layout = dialog.getLayout();
    var eoxPanel= new Ext.ContentPanel(Ext.id(), 
       { autoCreate:true, background:true, title: 'EoL/EoX', closable: false });
    var historyPanel= new Ext.ContentPanel(Ext.id(), 
       { autoCreate:true, background:true, title: 'History', closable: false });
    layout.beginUpdate();
    layout.add('west', new Ext.ContentPanel('west', {title: 'Part QWRRTRS-WWERWE',url: '../default.php'}));             
    layout.add('center', eoxPanel); 
    layout.add('center', historyPanel);
    eoxPanel.setUrl({ url: '../default.php', scripts: true});
    historyPanel.setUrl({ url: '../default.php', scripts: true});           
    layout.endUpdate();

  9. #9
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    short answer: any html document (not json data)

    long answer: any html,php,javascript,etc... document or any combination of the aformentioned.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default


    I did set Url to a server page that generates html, but the contentPanel doesn't set its dom to the resulting html. what's wrong? the request did get to the server correctly.
    thanks!
    Code:
    			var tab=mainLayout.getRegion('center').getTabs().getTab('main');
    			tab.activate();
    			tab.setUrl({url: "server_generate_html.php",
     					params: {'param': 'param'}
    					});
    Edit: my bad, it should have been activate first, then setURL.