Design issue for the grid in IE

[evs.saad]

Hi,
I am having problem in handling the grid design. I have two tabs in the grid. The main grid's viewconfig property is set to forcefit:true like

viewConfig: {
        forceFit:true
    },

and my tabs are set to forcefit:false. The design is working fine in firefox but when I open my grid the design is disturbed. I am attaching the design that is displayed in IE. These are my values for default in the main grid

defaults: 
        {
               autoScroll:true, 
               border: false,
               layout: 'fit'
        },

Can anyone help that what I am doing wrong in the grids.Thanks in advance

[willigogs]

Please provide all code for the tabs and grids - otherwise this is near impossible to diagnose.

[scottmartin]

It looks like your dom is not ready .. do you have onReady around your code?

btw, autoScroll and layout have no affect on the grid. The grid handles the scrolling and the layout should be set for the parent container.

You will need to provide a small example as mentioned for us to help.

Scott.

[evs.saad]

Here is my code

Ext.onReady(function() {
Ext.QuickTips.init();
 var xg = Ext.grid;
 var PageSize = 25;

var orderGridStore = new Ext.data.Store({
        root: 'rows',
        method: 'POST',
        totalProperty: 'result', 
        autoSave: false,
        batch: true,
        proxy: new Ext.data.HttpProxy({
        api: {
            read:  'ajax/orders.php?task=LISTING',
            create: 'orders.php?task=CREATE',
            update: 'orders.php?task=UPDATE',
            destroy:  'orders.php?task=DELETE'
        }
        }),
        writer: new Ext.data.JsonWriter({
            encode: true,
            writeAllFields: true,
            batch: true
        }),
        reader: new Ext.data.JsonReader({
            totalProperty: 'result',
            successProperty: 'success',
            idProperty: 'nr',
            root: 'rows'
     
        })

    });
    var pagingbar = new Ext.PagingToolbar({
    style: 'border:1px solid #99BBE8;',
    store: orderGridStore,
    pageSize: PageSize,
    displayInfo: true,
    width:220
});
var gridModel1 = new xg.CheckboxSelectionModel();

var GridPanel1 = {
    id: 'GridPanel1',
    xtype: 'editorgrid',
    title: 'Orders',
    height:350,
    labelWidth:200,
    frame: true,
    viewConfig: {
        forceFit:false
    },
    cm: new xg.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
      }),
    sm: gridModel1,
    store: orderGridStore,    
    bbar:[
    {
        text: 'Search',
        iconCls: 'icon-search',
        handler: function(){

        }
    },
  
    '-',pagingbar,
    

        
    
]
};
















var checkModel2 = new xg.CheckboxSelectionModel();
var gridPanel2 = {
    id: 'gridPanel2 ',
    xtype: 'editorgrid',
    title: 'Results',
    height:350,
    
    clicksToEdit: 2,
    frame: true,
    viewConfig: {
        forceFit:true
    },
    
    cm: new xg.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
    
     }),
    
    store: new Ext.data.Store({
        root: 'results',
        method: 'POST',
        autoSave: false,
        batch: true,
        proxy: new Ext.data.HttpProxy({
        api: {
            read: 'results.php?task=LISTING',
            create:'results.php?task=CREATE',
            update:'results.php?task=UPDATE',
            destroy:'results.php?task=DELETE'
        }
        }),
        writer: new Ext.data.JsonWriter({
            encode: true,
            writeAllFields: true,
            batch: true
        }),
        reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            successProperty: 'success',
            idProperty: 'result_id',
            root: 'results',
           
        }),

    }),
    sm: checkModel2,
    
    bbar:[{
    '-',{
        text: 'Search',
        iconCls: 'icon-search',
        handler: function(){ 

        }
        
    },

    
    ,'->'

    ]
};





var panel = new Ext.Panel({
    title:"Grid",
    height:400,    
    viewConfig: {
        forceFit:true
    },
    renderTo: 'orders-grid',
    defaults:{autoScroll: true},
    items:[{
        xtype:"tabpanel",
        id:'ahTabs',
        activeTab:0,
        autoWidth: false,
        listeners: {
             tabChange: function() {
                var title = this.getActiveTab().title;
                if(title == 'Grid1'){
                    GridPanel1.store.load();
                }else if(title == 'Grid2'){
                   gridPanel2.store.load();
                }
             },
             beforetabchange: function(tabpanel, newTab, oldTab){
                if(!oldTab){
                    return;
                }else{
                    var title = oldTab.title;
                    
                    if(newTab){
                        if(title == 'Orders'){
                            Ext.getCmp('GridPanel1').stopEditing(false);
                        }else if(title == 'Results'){

                        }

                    }else{
                        alert('Ending with ' + oldTab.title);
                    }
                }
            }
        },
        defaults: 
        {
               autoScroll:true, 
               border: false,
               layout: 'fit'
        },
        items:[GridPanel1,GridPanel2]
      }]
});
});

[scottmartin]

In reviewing your code, you have:

-numerous syntax errors (comma, etc)
-GridPanel2 vs gridPanel2
-incomplete column module

You will need to present a working test case.

Ext.onReady(function () {
 //   Ext.QuickTips.init();
    var xg = Ext.grid;
    var PageSize = 25;

    var orderGridStore = new Ext.data.Store({
        root          : 'rows',
        method        : 'POST',
        totalProperty : 'result',
        autoSave      : false,
        batch         : true,
        proxy         : new Ext.data.HttpProxy({
            api : {
                read    : 'ajax/orders.php?task=LISTING',
                create  : 'orders.php?task=CREATE',
                update  : 'orders.php?task=UPDATE',
                destroy : 'orders.php?task=DELETE'
            }
        }),
        writer        : new Ext.data.JsonWriter({
            encode         : true,
            writeAllFields : true,
            batch          : true
        }),
        reader        : new Ext.data.JsonReader({
            totalProperty   : 'result',
            successProperty : 'success',
            idProperty      : 'nr',
            root            : 'rows'

        })

    });
    var pagingbar = new Ext.PagingToolbar({
        style       : 'border:1px solid #99BBE8;',
        store       : orderGridStore,
        pageSize    : PageSize,
        displayInfo : true,
        width       : 220
    });
//    var gridModel1 = new xg.CheckboxSelectionModel();

    var GridPanel1 = {
//        id         : 'GridPanel1', // bad practice
        xtype      : 'grid',
        title      : 'Orders',

        height     : 350,

        labelWidth : 200,
        frame      : true,
        viewConfig : {
            forceFit : false
        },
/*
        cm         : new xg.ColumnModel({
            defaults : {
                width    : 120,
                sortable : true
            }
        }),
*/

    cm : new Ext.grid.ColumnModel({
        columns: [{
            header: 'Company',
            dataIndex: 'company'
        }]
    }),

        
//        sm         : gridModel1,
        store      : orderGridStore,
        bbar       : [
            {
                text    : 'Search',
                iconCls : 'icon-search',
                handler : function () {

                }
            },

            '-',
            pagingbar


        ]
    };


//    var checkModel2 = new xg.CheckboxSelectionModel();
    var GridPanel2 = {
//        id     : 'gridPanel2 ',  // bad practice
        xtype  : 'grid', 
        title  : 'Results',

        height     : 350,

        clicksToEdit : 2,
        frame        : true,
        viewConfig   : {
            forceFit : true
        },
/*
        cm : new xg.ColumnModel({
            defaults : {
                width    : 120,
                sortable : true
            }

        }),
*/
        cm : new Ext.grid.ColumnModel({
            columns: [{
                header: 'Company',
                dataIndex: 'company'
            }]
        }),


        store : new Ext.data.Store({
            root     : 'results',
            method   : 'POST',
            autoSave : false,
            batch    : true,
            proxy    : new Ext.data.HttpProxy({
                api : {
                    read    : 'results.php?task=LISTING',
                    create  : 'results.php?task=CREATE',
                    update  : 'results.php?task=UPDATE',
                    destroy : 'results.php?task=DELETE'
                }
            }),
            writer   : new Ext.data.JsonWriter({
                encode         : true,
                writeAllFields : true,
                batch          : true
            }),
            reader   : new Ext.data.JsonReader({
                totalProperty   : 'total',
                successProperty : 'success',
                idProperty      : 'result_id',
                root            : 'results'

            })

        }),
//        sm    : checkModel2,
/*
        bbar : [
            '-', {
                text    : 'Search',
                iconCls : 'icon-search',
                handler : function () {

                }

            },


            , '->'

        ]
*/        
    };


    var panel = new Ext.Panel({
        title      : "Grid",
        height     : 400,
        viewConfig : {
            forceFit : true
        },
        renderTo   : Ext.getBody(),
//        defaults   : {autoScroll : true},
        items      : [
            {
                xtype     : "tabpanel",
//                id        : 'ahTabs',
                activeTab : 0,
                autoWidth : false,
                listeners : {
                    tabChange       : function () {
                        var title = this.getActiveTab().title;
                        if (title == 'Grid1') {
                            GridPanel1.store.load();
                        } else if (title == 'Grid2') {
                            gridPanel2.store.load();
                        }
                    },
                    beforetabchange : function (tabpanel, newTab, oldTab) {
                        if (!oldTab) {
                            return;
                        } else {
                            var title = oldTab.title;

                            if (newTab) {
                                if (title == 'Orders') {
                                    Ext.getCmp('GridPanel1').stopEditing(false);
                                } else if (title == 'Results') {

                                }

                            } else {
                                alert('Ending with ' + oldTab.title);
                            }
                        }
                    }
                },
                
                defaults  : {
                    autoScroll : true,
                    border     : false,
                    layout     : 'fit' 
                },
                
                items     : [GridPanel1, GridPanel2]
            }
        ]
    });
});

Scott