PDA

View Full Version : problems during adding dinamically items in a panel



truijllo
17 Dec 2009, 9:19 AM
Hi guys
In a FormPanel I would control two fields with a radio group, displaying a single field hiding the other.
I'm experiencing problems with these fields:
* howmany
* serialN
when I switch radio control into "by serial" position "howmany" disappears as expected but serialN doesn't appears.

In console I've tried to simulate the right flow



var k = Ext.getCmp('itemDetails');
k.items.items // just to see items
k.add(Ext.getCmp('howmany'));
k.remove(Ext.getCmp('serialN'),false);
k.items.items // this displays the updated situation

k.doLayout(); // nothing happens :/

can you give me an hand ?
thank you so much




Ext.onReady(function(){

//
// category
//
var categoryData = Ext.data.Record.create([
{name: 'id', type: 'int', mapping: 'id'},
{name: 'name', type: 'string', mapping: 'name'}
]);

var categorySerialData = Ext.data.Record.create([
{name: 'id', type: 'int', mapping: 'id'},
{name: 'name', type: 'string', mapping: 'name'}
]);


//
// item
//
var itemData = Ext.data.Record.create([
{name: 'id', type: 'int', mapping: 'id'},
{name: 'name', type: 'string', mapping: 'name'}
]);

var itemStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: '/getItems' }),
autoLoad:true,
reader: new Ext.data.JsonReader({
id: 'id',
totalProperty: 'results',
root:'items'
}, itemData
)
});

//
// supplier
//
var supplierData = Ext.data.Record.create([
{name: 'id', type: 'int', mapping: 'id'},
{name: 'name', type: 'string', mapping: 'name'}
]);




//
// location
//
var locationData = Ext.data.Record.create([
{name: 'id', type: 'int', mapping: 'id'},
{name: 'shelf', type: 'string', mapping: 'shelf'}
]);


//
// COMBO cat
//
var catList = new Ext.form.ComboBox({
store: categoryStore,
valueField: 'id',
displayField:'name',
emptyText: 'Select a category...',
fieldLabel: 'Category',
id: 'category',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
editable: true,
selectOnFocus:true,
blankText: 'Category is required',
allowBlank: false,
msgTarget: 'under',
listeners: { select: { fn:function(combo, value)
{ itemStore.load({params:{category: this.value}});
}
}
}
});

//
// COMBO item
//
var itemList = new Ext.form.ComboBox({
store: itemStore,
valueField: 'id',
displayField:'name',
emptyText: 'Select an item type...',
fieldLabel: 'Item type',
id: 'item',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
editable: true,
selectOnFocus:true,
blankText: 'Item is required',
allowBlank: false,
msgTarget: 'under'
});


//
// COMBO supplier
//
var supplierList = new Ext.form.ComboBox({
store: supplierStore,
valueField: 'id',
displayField:'name',
emptyText: 'Select a supplier...',
fieldLabel: 'Supplier (*)',
id: 'supplier',
typeAhead: true,
mode: 'local',
//forceSelection: true,
triggerAction: 'all',
editable: true,
selectOnFocus:true,
blankText: 'Supplier is required',
allowBlank: false,
msgTarget: 'under'
});



//
// COMBO location
//
var locationList = new Ext.form.ComboBox({
store: locationStore,
valueField: 'id',
displayField:'shelf',
emptyText: 'Select a location...',
fieldLabel: 'Location (*)',
id: 'location',
typeAhead: true,
mode: 'local',
//forceSelection: true,
triggerAction: 'all',
editable: true,
selectOnFocus:true,
blankText: 'Location is required',
allowBlank: false,
msgTarget: 'under'
});


var howmany = new Ext.ux.form.SpinnerField({
id: 'howmany',
minValue: 1,
maxValue: 100000,
//allowBlank: false,
defaultValue : 10,
allowNegative: false,
allowDecimals: false,
incrementValue: 1,
accelerate: true,
fieldLabel: 'How many objects',
allowBlank: false,
msgTarget: 'under'

});


var serialN = new Ext.form.TextArea ({
fieldLabel: 'S/N',
id: 'serialN',
blankText: 'Name is required',
allowBlank: false,
msgTarget: 'under',
width: 230
});


var insertHint = new Ext.form.Label({
id: 'inserthint',
text: '(*) this object can be added in this form'
});
//
// PANEL IN STOCK
//
var sceltaTipo = new Ext.form.RadioGroup({
id: 'scelta',
fieldLabel: 'Edit type',
items: [
{boxLabel: 'by Number', name: 'sceltatipo',inputValue: 1, checked: true},
{boxLabel: 'by Serial', name: 'sceltatipo',inputValue: 2 }
],
listeners: { change: { fn:function(combo, value)
{ var pippo = value;
if (value.inputValue==2)
{
Ext.getCmp(itemPanel).remove(howmany, false);
Ext.getCmp(itemPanel).add(serialN);

//howmany.setVisible(false);
//serialN.setVisible(true);
}
else
{
Ext.getCmp(itemPanel).add(serialN);
Ext.getCmp(itemPanel).remove(serialN, false);

}
Ext.getCmp('itemDetails').doLayout();
}
}
}
});

var itemPanel = new Ext.form.FormPanel({
id: "itemDetails",
frame:true,
title: 'Details by number ...',
waitMsgTarget: true,
defaultType: 'textfield',
url: '/manageDetails/',
items: [ sceltaTipo,
catList,
itemList,
supplierList,
locationList,
howmany,
serialN,
insertHint
]
});


//
// GLOBAL
//
var tabs1 = new Ext.TabPanel({
id: 'tabs1',
renderTo: 'movimenti',
activeTab: 0,
width: 420,
height:300,
plain:true,
defaults:{autoScroll: true},
items:[
itemPanel

]
});
});