PDA

View Full Version : [DUP] Form Panel delete items are not getting updated to .getForm() instance



rkasim
23 Apr 2013, 3:55 AM
Hi ,

Basically , I m building form panel having items as Field container . Every Field container is having items and delete operation.

When I perform delete operation on Form panel , simply I go with
formPanel.remove(item);

Above statement will remove field container item of formPanel , until here everything looks good.

But when I read form instance to read the fieldvalues , deleted items are also available .
var form = formPanel.getForm();

if (form.isValid()) {
Ext.iterate(form.getFieldValues(), function(key, value) {
//read values , here deleted items are also available
},this);

I wonder why basic form is having still deleted keys/items where as formPanel is updated and doesn't have deleted items?

Could somebody help me out how I can basic form ? I have tried with formPanel.doLayout() but of no use.

Regards,
Ravi.

Merlina
23 Apr 2013, 4:48 PM
What do you mean by "deleted items are also available"?

rkasim
23 Apr 2013, 7:40 PM
Thanks Merlina.

As mentioned , form is still having deleted item keys .
So when I read getFieldValues() , all the keys are retrieved. I expect that deleted item keys should also be flushed out from Basic Form.

I have debugged the form and found monitor having keys and items . Not sure how to refresh , any direct approach ?

Regards,
Ravi.

slemmon
24 Apr 2013, 2:52 PM
What if you do remove(item, true)? Do you still have the issue then?

rkasim
24 Apr 2013, 8:30 PM
Hi Slemmon,

Still I see same issues , form->monitor is still having deleted items and keys.

Regards,
Ravi.

slemmon
25 Apr 2013, 3:18 PM
I've not been able to recreate the issue you're seeing. Can you post an inclusive test case that demonstrates the issue?
Also, are you seeing the issue on version 4.2 (or 4.2.1 Beta)?

rkasim
28 Apr 2013, 8:40 PM
Hi slemmon,

I m using Sencha Architect tool , Ext JS version 4.2 only. Below I have paste code snippets.

1) Form Items having Add and Clear fields functions . First item comes delete button of the corresponding item.


items: [
{
xtype: 'form',
onItemAdd: function(ct, comp) {


},
onItemRemove: function(ct, comp) {
alert("hit");
},
height: 503,
id: 'costtab',
width: 903,
autoScroll: true,
bodyPadding: 10,
baseParams: {
proxyid: 'cost'
},
url: 'TestServlet',
items: [
{
xtype: 'fieldcontainer',
height: 134,
id: 'lineitem1',
itemId: 'lineitem1',
width: 679,
layout: {
type: 'column'
},
items: [
{
xtype: 'button',
id: 'button_1',
margin: '0 10 0 0',
width: 24,
icon: 'images/row_remove16.png',
text: '',
listeners: {
click: {
fn: me.onButton_1Click,
scope: me
}
}
},
{
xtype: 'textfield',
id: 'glaccount_1',
margin: '0 10 0 0',
width: 82
},
{
xtype: 'textfield',
id: 'costcenter_1',
margin: '0 10 0 0',
width: 82
},
{
xtype: 'button',
id: 'search_1',
margin: '0 10 0 0',
icon: 'images/search.gif'
},
{
xtype: 'textfield',
id: 'itemamt_1',
margin: '0 10 0 0',
width: 82
},
{
xtype: 'textfield',
id: 'percent_1',
margin: '0 10 0 0',
width: 82
},
{
xtype: 'textfield',
id: 'compcode_1',
margin: '0 10 0 0',
width: 82
},
{
xtype: 'hiddenfield',
id: 'hidden_1',
itemId: 'hidden_1',
fieldLabel: 'Label',
value: 1
},
{
xtype: 'button',
id: 'ps_1',
text: 'PS'
},
]
}
]
}
],
dockedItems: [
{
xtype: 'form',
dock: 'bottom',
id: 'costtab1',
layout: {
type: 'auto'
},
bodyPadding: 10,
items: [
{
xtype: 'button',
id: 'add',
margin: '0 10 0 0',
text: 'Add',
listeners: {
click: {
fn: me.onAddClick1,
scope: me
}
}
},
{
xtype: 'button',
id: 'clear',
text: 'Clear Fields',
listeners: {
click: {
fn: me.onAddClick11,
scope: me
}
}
}
]
}
]
},
2) Add and Delete items functions:
onAddClick1: function(button, e, eOpts) { // Add item to form
var costSec = Ext.getCmp('costtab');
var initConfig = costSec.initialConfig.items[0];
var config = Ext.apply({}, costSec.initialConfig.items[0]);
var incr = costSec.items.length+1;
config.id = 'lineitem'+incr;
config.itemId = 'lineitem'+incr;
config.items[0].id = 'button_'+incr;
config.items[1].name = 'glaccount_'+incr ;
config.items[1].id = 'glaccount_'+incr;
config.items[2].name = 'costcenter_'+incr;
config.items[2].id = 'costcenter_'+incr;
config.items[3].id = 'search_' +incr;
config.items[4].name = 'itemamt_' +incr;
config.items[4].id = 'itemamt_' +incr;
config.items[5].name = 'percent_' +incr;
config.items[5].id = 'percent_' +incr;
config.items[6].name = 'compcode_' +incr;
config.items[6].id = 'compcode_' +incr;
config.items[7].name = 'hidden_' +incr;
config.items[7].id = 'hidden_' +incr;
config.items[7].value = incr;
config.items[8].id = 'moresection_' +incr;
config.items[9].id = 'ps_'+incr;
costSec.add(config);
costSec.doLayout();
},


onButton_1Click: function(button, e, eOpts) { //Delete item from form


var costSec = Ext.getCmp('costtab');
var form = costSec.getForm();


var buttonid = button.getId();
var buttonarr = buttonid.split("_");
var buttonpos = buttonarr[1];


var t = 'lineitem'+(buttonpos);


costSec.items.each( function(itemid,value) {


var lvitemid = itemid.id;
if(t == lvitemid)
costSec.remove(itemid,true);


}, this);


},

3) Read the form items

var form = costSec.getForm(), // read form items
str='',
s,encode = Ext.String.htmlEncode;


if (form.isValid()) {
Ext.iterate(form.getFieldValues(), function(key, value) {


str += key +"="+ value+"<br/>";
//var value = encode(value);
// s += Ext.util.Format.format("{0} = {1}<br />", key, value);
}, this);
}

Appreciate your help !!!.

Regards,
Ravi

slemmon
28 Apr 2013, 10:14 PM
Thank you for the bug report.
It looks like this is being fixed in 4.2.1 - is already fixed in 4.2.1 Beta.
See: http://www.sencha.com/forum/showthread.php?258928

rkasim
29 Apr 2013, 1:27 AM
Excellent slemmon !!! It works with 4.2.1 beta version.

Regards,
Ravi.

rkasim
29 Apr 2013, 1:44 AM
Hi Slemmon,

Could you please help me alos where I can download Ext 4.2.1 released version?
I don't see it available here http://cdn.sencha.com/ext/gpl/4.2.1

R (http://cdn.sencha.com/ext/gpl/4.2.1)egards,
Ravi.