PDA

View Full Version : Containers don't fit the panel



r.dilillo
21 Sep 2012, 1:11 AM
First of all, hi to everyone here! Second thing: i'm not english so you could find some errors in my posts... don't hate me. :(
However, i'm new in the community, i've just approached to Sencha ExtJs 4.1, and i think it's really Awesoooome! :D
By the way i'm a niwbie and i've just fell in the first problem.
(NDR i'm using architect tryal version)

i'm trying to make a simple panel with some tabs. One of these has 2 fieldset inside, and i'm crushing my head trying to understand how to set 'em to 50% width and 100% height (of the panel)! there is any strange option or propriety to set? thx everybody!
Oh! i was forgetting the code: :"> (it's just the interested part)




xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'Availability',
items: [
{
xtype: 'container',
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'fieldset',
flex: 1,
layout: {
type: 'fit'
},
title: 'Scheduling',
items: [
{
xtype: 'displayfield',
fieldLabel: 'Video scheduling is currently available to Mainstreaming Pro or Enterprise Edition Stream'
}
]
},
{
xtype: 'fieldset',
flex: 2,
layout: {
type: 'fit'
},
title: 'Geographic Filtering',
items: [
{
xtype: 'displayfield',
fieldLabel: 'Geo-filtering settings for videos are currently available'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'button',
text: 'Save Changes'
}
]
}
]
}

scottmartin
22 Sep 2012, 3:10 PM
how to set 'em to 50% width and 100% height (of the panel)

See if this helps:



Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 312,
width: 520,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'My Fields'
},
{
xtype: 'fieldset',
flex: 1,
title: 'My Fields'
}
]
});

me.callParent(arguments);
}

});



Scott.