PDA

View Full Version : Loading 2 Box fields in a single panel



Soumyajm
10 Jul 2012, 3:58 AM
hi,
I am having one requirement like on click i need to render a panel on the screen . For that i am doing
searchPanel = new Ext.Panel({
header:false,
width: 600,
minHeight:0,
maxHeight: 700,
frame:false,
collapsible:true,
autoScroll:true,
renderTo: 'filtersSearchExt',
border:false
});
Ext.define('Filter', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'}
]
});
var segmentName=filtersData.filter[i].name;
var Segments = eval('(' + document.getElementById('filterHide_' + segmentName).innerHTML + ')').data;
var store= Ext.create('Ext.data.Store', {
model: 'Filter',
storeId: 'sg',
data: Segments
});

var unitField = new Ext.create('Ext.ux.form.field.BoxSelect', {
labelAlign : 'top',
fieldLabel: segmentName,
id:segmentName,
width:275,
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
stacked: true,
pinList: true,
triggerOnClick: true,
filterPickList: false,

listeners: {
'focus': {
fn: function (comboField) {
comboField.expand();
}
}
}

});
searchPanel.add(unitField);

searchPanel.add(unitField);
unitfield is a Box select .
Now on click of each item i am adding unitfield in seachpanel one below the other . The requirement i need to add 2 unitfield(Box select ) in one row . How i can do this ?

Farish
10 Jul 2012, 4:12 AM
If you want to add them (2 or more) all horizontally, then use layout: 'hbox' for your searchPanel.

sword-it
10 Jul 2012, 4:13 AM
Hi Soumyajm,

Looks like you want add two boxField on the panel within a single row, if yes you must give column layout to the panel. The child item of panel will be added in a single row.



searchPanel = new Ext.Panel({
header:false,
layout:'column',
renderTo: 'filtersSearchExt',
border:false
});

Soumyajm
10 Jul 2012, 4:41 AM
Thanks a lot . Its working . One small issue is there there is no gap between 2 panel , I am giving padding property but its not taking
searchPanel = new Ext.Panel({
header:false,
width: 600,
minHeight:0,
maxHeight: 700,
frame:false,
collapsible:true,
renderTo: 'filtersSearchExt',
autoScroll:true,
border:false,
layout:'column',
padding:'10 5 3 10'

});

i have aatched the image

sword-it
10 Jul 2012, 4:55 AM
I didn't getting your point, If you give padding:'10 5 3 10' to the panel, panel should be take padding outersite.

If you want to give space between boxFields, then you must specify padding:'10 5 3 10' to the boxfield component or you can use style config (Style : 'padding-left: 10px;') .

Soumyajm
10 Jul 2012, 5:28 AM
Ya i hade given for Box field . Its working . One more doubt not w.r.to panel . where i can get the code of datepicker . I had gone through the code of Ext-all.js in that its not there . Where actually the code is ?

sword-it
10 Jul 2012, 5:45 AM
you can see datepicker class code from the Sencha API docs. Link is http://docs.sencha.com/ext-js/4-1/source/Date3.html#Ext-picker-Date