1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    0
    litumishra is on a distinguished road

      0  

    Question Dynamic Tab with grid -How to

    Dynamic Tab with grid -How to


    I am using extJs Grid to show data from sql server database. I want to show the datas in grid in multiple Tabs.

    I want to create Tabs dynamically based on a value returned from DB. If DB returns 3 i should be able to create 3 Tabs dynamically with a grid in each Tab.

    The grids will contain their own data for display.

    I have tried using TabPanel for same. But not finding the proper way. I would also like to have lazy loading on each Tab. i.e the data should be loaded when the user clicks on Inactive Tab.

    Can anybody provide some help in this regard? Any sample example or reference will be helpful.

    Thanks in advance.

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    186
    Vote Rating
    0
    Darklight is on a distinguished road

      0  

    Default


    the creation of the tabs should be handled server-side (if 3 results, create 3 tabs).
    then just set the 'autoLoad' property (this adds lazy loading) of each tab to the url that will create the grid

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    0
    litumishra is on a distinguished road

      0  

    Default


    Can you please share some reference as to how i can do from server side. I am new to extJs and trying it out for one of my projects.

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    186
    Vote Rating
    0
    Darklight is on a distinguished road

      0  

    Default


    with server side i mean your language of choice (PHP, ASP, etc.)
    i mostly use ColdFusion, and this would be one way to do it:

    Code:
    new Ext.TabPanel({
       items:[{
       // START SERVER SIDE CODE
       <cfloop from="1" to="#dbQuery.RecordCount#">
          title:'TabTitle',
          autoLoad:'Url to grid generator'
       </cfloop>
       ]}
    });

  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    0
    litumishra is on a distinguished road

      0  

    Default


    Thanks for reply. Is there any alternative way of doing this on client side. Like i will use the Tab panel to get the value from URL and add that many number of Tabs as per response from the server.

    Like if 3 is the reponse from server, i will add 3 tabs to Tabpanel and same time i will add the grid to each Tab.

    Please tell me if it is possible this way. Any sample for this would be helpful.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    186
    Vote Rating
    0
    Darklight is on a distinguished road

      0  

    Default


    i would only do it this way if you really have to dynamically create the items during runtime.
    if you can do it during page load, my way would be much faster/efficient, since you don't have to wait for the page to load, initiate an AJAX request for the db results, and then creating the tabs/grid on the fly. that'd take quite a while, depending on the data/complexity of the grids and db results.
    if you have to do it at runtime though you'll have to wait for help from someone else, i'm not l33t enough to give you a sample ;D

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    There is a dynamic tabs example in the demos that shows how to add tabs. www.extjs.eu has an example of a grid in an inactive tab.

    Put those together plus another ajax call to get the grids/tabs in the first place and I think you're there.

    There's also a remote load component example in your local examples directory that is "unadvertised".

    That should be enough for you to rough up some code I think. If you want further help on this just post your code and state your problems. I'd suggest if you want to do that, remember to keep your starting code very simple and basic. Add the bells and whistles after you get it 'operational'. This way you can post a small amount of code on the forums and get help.

  8. #8
    Ext User
    Join Date
    Sep 2008
    Posts
    8
    Vote Rating
    0
    Prodepa is on a distinguished road

      0  

    Default same problem

    same problem


    I'm having the same problem, the grid will apper(populate) when an event onblur is fired, how can fired automatically this together with the tabs, my code is:
    [php]

    Ext.onReady(function(){


    $('#txtNumProcesso').blur(function(){
    getFases($('#txtNumProcesso').val() );
    });


    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';


    var xg = Ext.grid;

    var store = [];

    var nFases = 0;//get the value of the db if nFases = 3 the number of the Tab will be 3.

    var i = 0;


    var grid = new xg.GridPanel({
    store: store,
    columns: [
    {header: "Itens", width: 489, sortable: false, menuDisable: false, dataIndex: 'item'},
    {header: 'Avalia