PDA

View Full Version : Beginner layout, render, form questions



leowyatt
11 Nov 2010, 7:47 AM
Hi everyone.

I'm taking slow steps into the world of Extjs and am looking to build an application but am struggling linking it all together.

I've build a basic viewport with 2 panels, north and center. In the north panel I have a toolbar which contains menus. When I click on a menu item I'm trying to render a form in the center panel. I've written the code to do this and I can see the form being loaded but it's about 5 pixels high. I'm not sure if this is to do with the height or width not being set, but adding these has made no difference.

I've included my viewport files to see if that can shed any light on things;


MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
region: 'north',
layout: 'hbox',
height: 24,
items: [
{
xtype: 'button',
text: 'Home',
flex: 1,
},
{
xtype: 'button',
text: 'Goods',
flex: 1,
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Goods In',
ref: '../../../goodsInButton'
},
{
xtype: 'menuitem',
text: 'Goods Out',
ref: '../../../goodsOutButton'
},
{
xtype: 'menuitem',
text: 'Stock List',
ref: '../../../stockListButton'
}
]
}
},
{
xtype: 'button',
text: 'Documentation',
flex: 1,
},
{
xtype: 'button',
text: 'Help',
flex: 1,
}
]
},
{
xtype: 'panel',
region: 'center',
id: 'content',
itemId: 'content',
ref: '../../../content'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});


MyViewport = Ext.extend(MyViewportUi, {
initComponent: function() {
MyViewport.superclass.initComponent.call(this);
this.goodsInButton.on('click', this.goodsInClick, this);
this.goodsOutButton.on('click', this.goodsOutClick, this);
},

goodsInClick: function() {
var tab = Ext.getCmp('content');
tab.removeAll();
tab.add(goodsIn);
tab.doLayout();
},

goodsOutClick: function() {
var tab = Ext.getCmp('content');
tab.removeAll();
tab.add(goodsOut);
tab.doLayout();
},

homeClick: function() {
var tab = Ext.getCmp('content');
tab.removeAll();
tab.add(home);
tab.doLayout();
},

documentationClick: function() {
var tab = Ext.getCmp('content');
tab.removeAll();
tab.add(documentation);
tab.doLayout();
}
});

leowyatt
11 Nov 2010, 11:33 PM
I've tried putting a window in the centre panel and adding the form to that but I still get the same issue, the form appears on screen, fills the width of the window and is only around 5 pixels high.

Animal
11 Nov 2010, 11:47 PM
layout

You must be completely familiar with this class. Read the entire intro. The click the "Expand all members" button and read all the configs.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.Container

leowyatt
12 Nov 2010, 12:49 AM
Cheers Animal,

I'll read the container section. I've included 2 screenshots to show what's happening as I don't think I'm describing it correctly.

2330723308