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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar