PDA

View Full Version : Inserting container with textfields into form panel



JackJohnsonX
4 Nov 2014, 2:43 PM
I have a form panel which has a container containing textfields, combos, datefields etc. On click of an add button, I want to add a copy of that container to the same form panel. So there will then be two rows of the same exact containers.


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

initComponent: function() {




this.items =[
{
xtype:"container"
,layout:"hbox"
,itemId:"containerIWantToReplicate",
,items:[
{
xtype:"textfield",
fieldLabel:"blah"
}
,{
xtype:"textfield"
}
,{
xtype:"combo"
}
,{
xtype:"datefield"
}
,{
xtype:"button"
}
]
},
{
xtype:"container",
layout:"hbox",
items:[{xtype:"button", text:"SAVE"},{xtype:"checbox"}]
}
];
this.callParent(arguments)}

so the first container with the fields is the one I want to replicate and insert into my form panel every time the add button is clicked. Currently, I am using the insert( ) method and something definitely happens but i am not getting the expected result

//add btn handler

handleAddContainer: function() {
this.getMyForm().insert(1, this.getMyContainer());
this.getMyForm().doLayout();
}

when add btn is clicked I THINK the container gets inserted into the form panel, What happens is the bottom container in the form panel with the button and checkbox shifts to the top and the new(or existing?) container shifts to the bottom.

In FB console i ran Ext.ComponentQuery.query("container#containerIWantToReplicate").length but it always returns 1 no matter how many times i click the add btn.

So 2 questions- how do i insert the container into my form and 2) how do i insert it precisely between the first and second containers? so the container with SAVE button is always at the bottom.

Thanks

scottmartin
4 Nov 2014, 5:31 PM
You can do something like this:



Ext.define('MyForm', {
extend: 'Ext.form.Panel',
alias : 'widget.my-form',

layout: 'hbox',

width: 600,

items: [{
xtype: 'textfield',
fieldLabel: 'Field'
},{
xtype: 'textfield',
fieldLabel: 'Field'
}]

});

Ext.application({
name : 'Fiddle',

launch : function() {
var panel = Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),

height: 200,

title : 'MyPanel',

items : [
{ xtype : 'my-form'}
]
});

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
panel.add({ xtype : 'my-form'});
}
});
}
});

JackJohnsonX
4 Nov 2014, 6:47 PM
Scott,Thanks for your reply. With your approach I achieved the desired result. The two main changes were taking the container I wanted to replicate and creating a separate form class for it then adding it to the other form items by its xtype and 2) in the insert method using newly created forms xtype instead of a ref.I was curious about why, even after creating a separate form class, using a ref to that form inside insert() did not work? but when i used its xtype it worked as expected.


//did not work--produced result mentioned above with save button container shifting up
handleAddContainer: function() {
this.getMyForm().insert(1, this.getMyNewForm());
}
//works
handleAddContainer: function() {
this.getMyForm().insert(0, {xtype:"blah_new_form");
}