1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    bennie98 is on a distinguished road

      0  

    Default Problem With ToolbarWidth

    Problem With ToolbarWidth


    Hello

    I'm having a problem with my toolbar width.
    When the page is refreshed it renders with a correct width, but when you try to resize you window then the toolbar isn't resizing with it.

    The grid itself however does resize along with the window.

    I've tried plenty of things and I can't seem to figure out what the mistake is I am making...

    The Code
    Screen shot 2011-02-23 at 13.31.45b.jpg

    The Result
    Screen shot 2011-02-23 at 13.23.27b.jpg

    If anyone could help this would be much appreciated.

    Best Regards

    Bennie98


    edit: code not visible on screenshot due to resizing..

    Code:
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        var xg = Ext.grid;
    	
    
        // shared reader
        var reader = new Ext.data.ArrayReader({}, [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
           {name: 'industry'},
           {name: 'desc'}
        ]);
    
        var store = new Ext.data.GroupingStore({
                reader: reader,
                data: xg.dummyData,
                sortInfo:{field: 'company', direction: "ASC"},
                groupField:'industry'
            });
    
        var grid = new xg.GridPanel({
            
            store: store,
            columns: [
                {id:'company',header: "***", width: .50, sortable: true, dataIndex: 'company'},
                {id:'duration',header: "***", width: .125, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price', align:'center',},
                {id:'cost',header: "***", width: .125, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney, align:'center',},
                {id:'last',header: "***", width: .125, sortable: true, dataIndex: 'industry', align:'center',},
                {id:'date',header: "***", width: .125, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', align:'center',}
            ],
        
    
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),
    
            //frame:true,
            height: 606,
            //collapsible: true,
            //animCollapse: false,
            title: '***',
            tbar  : new Ext.Toolbar (
    				{height:25,
                    windowResize:true,
    				 items:[ 
    							 {text:'***',
               					  handler : function(){store.clearGrouping();}},
    		'   ',{text: '***'},
    		'   ',{text: '***t'},
    		'   ',{text: '***'},
    		'   ',{text: '***'}
    				],}
    				)
    		});
    	
    	var outer = new Ext.Panel({
    		height: 606
    		})
    	outer.add(grid)
    	outer.render(document.body)
        
        Ext.EventManager.onWindowResize(function() {
        grid.getView().refresh();
                                    });
        });

    In the CSS-file I've created these settings for ext-gen12 :

    Code:
    #ext-gen12 {
        position:absolute;
        top:150px;
        left:20px;
        right:485px;
        padding:0px;
    	margin:0px;
    	border:0;
    }
    I don't know if it has got anything to do with the problem.... I don't think so, but you never know

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    Try using the FitToParent plugin (see User Extensions forum) instead of trying to write your own onWindowResize function.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    bennie98 is on a distinguished road

      0  

    Default


    Could you give me a link pls?

    I'm new here and I'm not yet familiar with the entire forum.

    thx

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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  

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    bennie98 is on a distinguished road

      0  

    Default


    thank you

    will give it a try...

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    bennie98 is on a distinguished road

      0  

    Default


    I've implemented the plugin and it works, but my toolbar is now situated behind the gridpanel instead of above the table in the gridpanel...
    I don't know what made this happen, but I presume it has got something to do with the plugin.
    Screen shot 2011-02-25 at 13.46.41.jpg
    as you can see at the rightside of the scrollbar.

    what can I do to get the toolbar in the grid again?

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    1. Remove that css rule.
    2. Add the FitToParent plugin to the outer panel and configure it with fitHeight:false.
    3. Make the outer panel layout:'fit'.

    ps. Why are you even using an outer panel?

  8. #8
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    bennie98 is on a distinguished road

      0  

    Default


    the outer panel isn't there anymore...

    I've deleted the CSS as you said and now it's working again

    Thx for your patience.
    I'm only just starting to learn JS.
    So, I haven't really grasped the css connection yet.
    It's going to take a while to get used to the way of working, slow but steady

Thread Participants: 1

Tags for this Thread