PDA

View Full Version : How working combination of layouts?



mmuruev
5 Oct 2012, 3:48 AM
I'm trying make few column of field and everything seems good except xtype: 'multiset' , it just ignoring width option. Without 'fieldcontainer' everything fine.

{ fieldLabel:'Command',
name:'command',
width:180,
allowBlank:false
},
{
xtype:'fieldcontainer',
// The body area will contain three text fields, arranged
// horizontally, separated by draggable splitters.
layout:'hbox',
hideEmptyLabel:false,
items:[
{
xtype:'fieldcontainer',
// The body area will contain three text fields, arranged
// horizontally, separated by draggable splitters.
//layout: 'vbox',
width:55,
//anchor:'100%',
items:[
{
xtype:'radiofield',
name:'radio1',
value:'*',
// fieldLabel: '',
checked:true,
boxLabel:'All'
},
{
xtype:'radiofield',
name:'radio1',
// fieldLabel:'',
// hideEmptyLabel:false,
boxLabel:'Select',
handler:function (ctl, checked) {
var selector = Ext.getCmp('days-selector');
if (selector) {
if (checked) {
selector.enable();
} else {
selector.disable();
}
}


}
},
{
anchor:'50%',
xtype:'textfield'
// flex:1
},
{
//flex:1,
anchor:'10%',
xtype:'multiselect',
height:100,
minWidght: 50,
minSelections:1,
//overflowX:'auto',
name:'day',
id:'days-selector',
allowBlank:false,
store:dayset,
valueField:'id',
displayField:'value',
//value:['1'],
ddReorder:true,
disabled:true
}
]
}
How it looks. That is wrong here?

scottmartin
5 Oct 2012, 6:20 AM
Did you mean 100%?


anchor:'10%',

Perhaps you should place the multiselect under the container, as it is a panel itself.

Scott.

mmuruev
5 Oct 2012, 7:26 AM
Yes but no difference for this. 100% nor 10% just no reaction. And multiselect have to be inside I want group this section radiobuttons and multiselect. Here example that I want have at the end http://www.openjs.com/scripts/jslibrary/demos/crontab.php for multiselect

scottmartin
5 Oct 2012, 7:48 AM
You will have to make adjustments to fit the look you want, but this should help:




Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': '../../extjs4/examples/ux'
}
});

Ext.require('Ext.ux.form.MultiSelect');

Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',

height: 250,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
bodyPadding: 10,
title: 'My Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: 'Label'
},
{
xtype: 'fieldcontainer',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'radiofield',
flex: 1,
boxLabel: 'Label'
},
{
xtype: 'textfield',
flex: 2
}
]
},
{
xtype: 'fieldcontainer',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'radiofield',
flex: 1,
boxLabel: 'Label'
},
{
xtype: 'textfield',
flex: 2
}
]
},
{
xtype: 'multiselect',
store: Ext.create('Ext.data.ArrayStore', { fields: ['field'] }),
flex: 1
}
]
});

me.callParent(arguments);
}

});


Ext.onReady(function(){

Ext.create('MyApp.view.MyForm', {
renderTo: Ext.getBody()
});

});


Scott.

mmuruev
7 Oct 2012, 12:03 AM
Hm. I have tried your code it produce something completely different. And if I put multiselect out of container. How I can and other multiselects in this case. I thought may be better use table layout. I just not expect that multiselect support width setup only it it in first level container.

mmuruev
8 Oct 2012, 2:59 AM
I've done it with table layout. It's not perfect but looks like I want.