PDA

View Full Version : Create a row of new Elements in ExtJS



gameboy87
20 Jul 2012, 2:39 AM
I want to create a new row of items, say textfield, textarea(with labels) inside a Panel.

I tried searching and I found a example in http://jsfiddle.net/chrisramakers/ZcQAX/

B (http://jsfiddle.net/chrisramakers/ZcQAX/)ut this is with the HTML table. How can the same be implemented inside a Panel or Window ?

Thanks,

Farish
20 Jul 2012, 2:46 AM
you can simply create a textfield and add it to your panel:


newTextField = new Ext.form.field.Text({
fieldLabel: 'blah'
});

panel.add(newTextField);

this would add a text field to your panel.

gameboy87
20 Jul 2012, 4:05 AM
With a Add Button will it be added ?

Farish
20 Jul 2012, 4:24 AM
yes. you have to put this code in the handler of the add button as in the example you posted.

redraid
20 Jul 2012, 5:36 AM
Ext.onReady(function(){
var panel = Ext.create('Ext.panel.Panel', {
title: 'Test',
width: 400,
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
autoScroll: true,
tbar: [
{
text: 'Add row',
handler: function (btn) {
var panel = btn.up('panel'),
row = {
xtype: 'container',
layout: 'hbox',
padding: 5,
items: [
{
xtype: 'textfield',
fieldLabel: 'f1',
labelAlign: 'top',
flex: 1
},
{
xtype: 'textarea',
fieldLabel: 'f2',
labelAlign: 'top',
flex: 1
}
]
};

panel.add(row);
}
}
]
});
});
‚Äč http://jsfiddle.net/pARkd/2/

gameboy87
20 Jul 2012, 5:58 AM
Thanks all for replying. I got a perfect example here...:)


http://www.extjsframework.com/ext-4.0.0/examples/myexamples/Forms/dynamicfields/index.html

scottmartin
20 Jul 2012, 7:59 AM
It might be helpful for others to share your code?

Scott.