1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    53
    Vote Rating
    0
    evs.saad is on a distinguished road

      0  

    Default Design issue for the grid in IE

    Design issue for the grid in IE


    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
    Code:
    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
    Code:
    defaults: 
            {
                   autoScroll:true, 
                   border: false,
                   layout: 'fit'
            },
    Can anyone help that what I am doing wrong in the grids.Thanks in advance
    Attached Images

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


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

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    53
    Vote Rating
    0
    evs.saad is on a distinguished road

      0  

    Default


    Here is my code
    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]
          }]
    });
    });

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

    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', // 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

Thread Participants: 2