1. #1
    Ext User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    AmolAwari is on a distinguished road

      0  

    Exclamation Grid not loading into tab panel

    Grid not loading into tab panel


    Hi frends,
    I am new to EXTJS

    I am using extjs 2.2 in one of my application. M facing problem while loading grid into the tabpanel.

    i have tried {
    cls:'x-plain',
    title:'Documents',
    layout:'fit',
    items: {
    autoLoad:'pageName.html'
    }
    but it is not helping me out.
    Note:pageName.html loads the grid into tabpanel

    can any one help me out of this?

    Thanks,
    Amy

  2. #2
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    Hello
    welcome to the ExtJS, do you use an ExtJS grid?
    سبحان الله و الحمد لله و لا اله إلا الله و الله أكبر و لا حول ولا قوة إلا بالله
    اللهم صل وسلم وبارك على نبينا وحبيبنا محمد واله الطيبين الطاهرين
    سبحان الله و بحمده عدد خلقه و رضا نفسه و زنة عرشه و مداد كلماته

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    AmolAwari is on a distinguished road

      0  

    Default


    Yes, Please see the image attached..ScreenShot.JPG
    Wherein I have to insert a grid into the comments tab also find the code snippet below for the same
    Code:
     },{
                    cls:'x-plain',
                    title:'Contact Info',
                        layout:'column',
                        border:false,
                        items:[{
                            columnWidth:.5,
                            layout: 'form',
                            border:false,
                            items: [{
                                xtype:'textfield',
                                fieldLabel: 'Media Type',
                                name: 'ba',
                                anchor:'95%'
                                    }, {
                                xtype:'textfield',
                                fieldLabel: 'Relationship',
                                name: 'bb',
                                anchor:'95%'
                                    }, {
                                xtype:'textfield',
                                fieldLabel: 'Location',
                                name: 'bc',
                                anchor:'95%'
                            }]
                        },{
                            columnWidth:.5,
                            layout: 'form',
                            border:false,
                            items: [{
                                xtype:'textfield',
                                fieldLabel: 'Date/Time',
                                name: 'cc',
                                anchor:'95%'
                                    },{
                                xtype:'textfield',
                                fieldLabel: 'Name',
                                name: 'cd',
                                vtype:'email',
                                anchor:'95%'
                                    },{
                                xtype:'textfield',
                                fieldLabel: 'Phone',
                                name: 'ce',
                                vtype:'email',
                                anchor:'95%'
                            }]
                        }]
                },{
                    cls:'x-plain',
                    title:'Comments',
                    layout:'fit',
                    items: {
                       }      
                        
                },{
                    cls:'x-plain',
                    title:'Documents',
                    layout:'fit',
                    items: {
                        
                    }
                },{

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You should not use autoLoad to load Ext components.

    Instead, include them in the layout itself (e.g. give the gridpanel title:'Documents' and use it as one of the items of the tabpanel).

  5. #5
    Ext User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    brijeshshah is on a distinguished road

      0  

    Default


    Here I am facing same problem...autoLoad url doesn't work to generate grid panel in Tab..
    Code

    Tab Panel
    Code:
    ,{
         title: 'Applications',              
          contentEl:'applications_tab',
           tabTip: 'Applications',                
           autoLoad: {url: 'URL',scripts:true},                
           index:2                                   
     }
    URL Page
    Code:
    <script type="text/javascript" charset="utf-8">
    
        var items = [      
            { name: 'name' },
    { name: 'created_at' },
    { name: 'updated_at' }
        ]
    
        var applications = Ext.data.Record.create(items);
    
        var selections = new Ext.grid.RowSelectionModel();
    
        var ds = new Ext.data.Store({
            reader: new Ext.data.JsonReader({root: 'applications', id: 'id', totalProperty: 'Total'}, applications),
            proxy: new Ext.data.HttpProxy({url: 'URL'}),
          remoteSort: true         
        });
    
        var grid = new Ext.grid.GridPanel({
            store: ds,
            //viewConfig: { forceFit: true },
            clicksToEdit: 'auto',
            enableColumnHide:false,
            enableColumnMove:false,
            border:false,
            bodyBorder:false,
            cls:'grid',
            title:'All Partners',
            iconCls:'icon-show-all',
            region:'center',
            sm: selections,
            columns: [
                    {
                        id: 'name',
                        header: 'name',
                        dataIndex: 'name',
              width: 80
                    },{
                        id: 'created_at',
                        header: 'Created at',
                        dataIndex: 'created_at',
                           width: 80,
                        sortable: true 
                    },{
                        id: 'updated_at',
                        header: 'Updated at',
                        dataIndex: 'updated_at',
                   width: 80,
                        sortable: true 
                    }   
            ],
            tbar: [
                {
                    id:'add',
                    text: 'Add',
                    disabled:false,
                    cls: 'x-btn-text-icon add',
                    handler:add
                },'-',{
                    id:'edit',
                    text: 'Edit',
                    disabled:true,
                    cls: 'x-btn-text-icon edit',
                    handler:edit
                },'-',{
                    id:'remove',
                    text:'Delete',
                    disabled:true,
                    cls:'x-btn-text-icon remove',
                    handler:remove
                },'->',
                    'Search:', ' ',
                     new Ext.app.SearchField({
                        store: ds,
                        items: items,
                        width:320
                    })
            ],
            bbar: new Ext.PagingToolbar({
                store: ds,
                displayInfo: true,
                displayMsg: 'Partners {0} - {1} of {2}',
                emptyMsg: "No partner to display"
            })
        });
        
        selections.on('selectionchange', function(){
            var n = selections.getSelected();
            var btns = grid.getTopToolbar().items.map;
            
        if(!n){
            btns.remove.disable();
                btns.edit.disable();
          return;
            } else {
                btns.remove.enable();
                btns.edit.enable();
                return;
        }
        });
        
        ds.on('remove', function(ds, record, index){
            mask();
            new Ajax.Request(record.id, 
                                             {method:'delete', parameters:'id='+id, onSuccess:unmask, onFailure:unmask});
          ds.load();
        });
        
        function mask(){
            grid.el.mask('Sending data to server...', 'x-mask-loading');
        }
        
        function unmask(){
            grid.el.unmask();
        }
        
        function add(){
            window.location = 'new'
        }
        
        function edit(){
            window.location = selections.getSelected().id+'/edit'
        }
        
        function remove(){
            Ext.Msg.confirm('Are you sure?', 'Do you want to delete '+selections.getCount()+' element/s?', function(btn, text){
                if (btn == 'yes'){
                    selections.each(function(r){
                        ds.remove(r);
                    })
                }
            });
        }
        
       
        ds.load();
      
    </script>
    I got the data in JSON properly but grid is not generated.

    Can anyone help me...?

    Thanks
    Brijesh Shah

  6. #6
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    hello
    why you want to use autoload, puts the grid directly into your panel
    Code:
    var items = [      
            { name: 'name' },
    { name: 'created_at' },
    { name: 'updated_at' }
        ]
    
        var applications = Ext.data.Record.create(items);
    
        var selections = new Ext.grid.RowSelectionModel();
    
        var ds = new Ext.data.Store({
            reader: new Ext.data.JsonReader({root: 'applications', id: 'id', totalProperty: 'Total'}, applications),
            proxy: new Ext.data.HttpProxy({url: 'URL'}),
          remoteSort: true         
        });
    
        var grid = new Ext.grid.GridPanel({
            store: ds,
            //viewConfig: { forceFit: true },
            clicksToEdit: 'auto',
            enableColumnHide:false,
            enableColumnMove:false,
            border:false,
            bodyBorder:false,
            cls:'grid',
            title:'All Partners',
            iconCls:'icon-show-all',
            region:'center',
            sm: selections,
            columns: [
                    {
                        id: 'name',
                        header: 'name',
                        dataIndex: 'name',
              width: 80
                    },{
                        id: 'created_at',
                        header: 'Created at',
                        dataIndex: 'created_at',
                           width: 80,
                        sortable: true 
                    },{
                        id: 'updated_at',
                        header: 'Updated at',
                        dataIndex: 'updated_at',
                   width: 80,
                        sortable: true 
                    }   
            ],
            tbar: [
                {
                    id:'add',
                    text: 'Add',
                    disabled:false,
                    cls: 'x-btn-text-icon add',
                    handler:add
                },'-',{
                    id:'edit',
                    text: 'Edit',
                    disabled:true,
                    cls: 'x-btn-text-icon edit',
                    handler:edit
                },'-',{
                    id:'remove',
                    text:'Delete',
                    disabled:true,
                    cls:'x-btn-text-icon remove',
                    handler:remove
                },'->',
                    'Search:', ' ',
                     new Ext.app.SearchField({
                        store: ds,
                        items: items,
                        width:320
                    })
            ],
            bbar: new Ext.PagingToolbar({
                store: ds,
                displayInfo: true,
                displayMsg: 'Partners {0} - {1} of {2}',
                emptyMsg: "No partner to display"
            })
        });
        
        selections.on('selectionchange', function(){
            var n = selections.getSelected();
            var btns = grid.getTopToolbar().items.map;
            
        if(!n){
            btns.remove.disable();
                btns.edit.disable();
          return;
            } else {
                btns.remove.enable();
                btns.edit.enable();
                return;
        }
        });
        
        ds.on('remove', function(ds, record, index){
            mask();
            new Ajax.Request(record.id, 
                                             {method:'delete', parameters:'id='+id, onSuccess:unmask, onFailure:unmask});
          ds.load();
        });
        
        function mask(){
            grid.el.mask('Sending data to server...', 'x-mask-loading');
        }
        
        function unmask(){
            grid.el.unmask();
        }
        
        function add(){
            window.location = 'new'
        }
        
        function edit(){
            window.location = selections.getSelected().id+'/edit'
        }
        
        function remove(){
            Ext.Msg.confirm('Are you sure?', 'Do you want to delete '+selections.getCount()+' element/s?', function(btn, text){
                if (btn == 'yes'){
                    selections.each(function(r){
                        ds.remove(r);
                    })
                }
            });
        }
        
       
        ds.load();
    
    ,{
         title: 'Applications',              
          //contentEl:'applications_tab',
           tabTip: 'Applications',                
           autoLoad: {url: 'URL',scripts:true},                
           index:2,
           items : grid 
     }
    سبحان الله و الحمد لله و لا اله إلا الله و الله أكبر و لا حول ولا قوة إلا بالله
    اللهم صل وسلم وبارك على نبينا وحبيبنا محمد واله الطيبين الطاهرين
    سبحان الله و بحمده عدد خلقه و رضا نفسه و زنة عرشه و مداد كلماته

  7. #7
    Ext User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    brijeshshah is on a distinguished road

      0  

    Default


    I have multiple pages rendered according to selection of tab...

    I found solution with grid.render option but data are not loaded in that.... means I can't see the data in the grid panel...

    Thanks
    Brijesh Shah

  8. #8
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    Hello
    what do you mean with "pages rendered according to selection of tab".
    is that each page in a tab?
    سبحان الله و الحمد لله و لا اله إلا الله و الله أكبر و لا حول ولا قوة إلا بالله
    اللهم صل وسلم وبارك على نبينا وحبيبنا محمد واله الطيبين الطاهرين
    سبحان الله و بحمده عدد خلقه و رضا نفسه و زنة عرشه و مداد كلماته

  9. #9
    Ext User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    brijeshshah is on a distinguished road

      0  

    Default


    Quote Originally Posted by issameddine View Post
    Hello
    what do you mean with "pages rendered according to selection of tab".
    is that each page in a tab?
    Yes in each tab there is one page set....

    Now I able to displayed the grid but data are not shown in fire fox. I checked IE 6 , data are displayed in grid.