PDA

View Full Version : Simplest layout?



papaja
16 Jul 2012, 2:02 AM
What would be the the simplest layout configuration if I want to have one or two toolbars on top and to have main area below which would hold windows?

I'm trying to escape border layout because I'm hoping for something lighter.

Initially I just added toolbar as item of the viewport, but now need arose to maximize windows. When I maximize window it occupies entire viewport, and I want toolbar to stay visible.

Izhaki
16 Jul 2012, 2:54 AM
Have you tried 'fit' layout in combination with 'tbar' config?

papaja
16 Jul 2012, 3:24 AM
Can't make it work.

Here is menu definition:

Ext.define('KS.view.appmenu.Menu', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.appmenu',

items: [{
text: 'Report',
action: 'dailyReport'
},{
text: 'Invoices',
action: 'listInvoices'
},
'->', {
xtype: 'label',
text: 'Supersoft'
}],

initComponent: function() {
this.callParent(arguments);
}
});

Here is app.js code:

Ext.Loader.setConfig({
enabled:true,
paths:{
'Ext':'lib/extjs/src'
}
});
Ext.require('Ext.container.Viewport');
Ext.require('Ext.form.Label');
/*Ext.require('Ext.Action');*/
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'Invoice', 'DailyReport', 'WorkOrder'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
tbar:'appmenu',
items: [{
// xtype: 'appmenu'
}]
});

}
});
I also tried

dockedItems: [{
xtype: 'appmenu',
dock: 'top'
}]instead of tbar, but doesn't work.

Where do I err?

scottmartin
16 Jul 2012, 7:46 AM
Windows are not going adhere, as they are displayed on top of everything and are not bound to the viewport. You can constrain a window to a panel if needed.
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/window/window.html

Scott.