PDA

View Full Version : Why is the response only mapped to the first textfield of duplicated textfields



willsun52000
7 Mar 2012, 11:01 PM
Any idea?

Ext.create('Ext.form.Panel', {
height: 250,
width: 400,
bodyPadding: 10,
title: 'My Form',
items: [
{
xtype: 'textfield',
name: 'hello',
fieldLabel: 'item',
anchor: '100%'
},
{
xtype: 'textfield',
name: 'hello',
fieldLabel: 'item',
anchor: '100%'
}
]
});
http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAB0CAIAAAAtlFPBAAAE7UlEQVR4nO3d3aobVRzG4RzkwnKBuQGvweOBwS9EUQdBW2tbK0qrtooH0q/sTS39iAfBMM6srKzQvTPr7zwPPyR7OplKSt4mbdlZbAECWrz30Z+SFKLheF38/UaSKi8xXvd+v5SkykuM191Hl5JUeYnxuvPoUpIqLzFetx9eSFLlJcbr+98uJKnyEuN169cLSaq8xHjd/GUjSZWXGK8bDzaSVHmJ8fr2wabfcrVertYlB8ftTtt39HxJKiwxXt/c3/TbT0/myKEKT5OkU0uM1/tf/dWv/9Lp0Jf9M8f3zV+wf9r4pxgcGVxK0mxLjFd743G/5Wq9++++/Zf9G4Pb/SPJO44vcvSa4+tLmm2J8frg5uN+y9V6fyNzu3+kf9/BweRFBqflf6LBTyFpniXG68PvHvdbrtaDI7uD++P98cqcduiO49OS5ySvJmm2Jcbr41tP+i1X68GR3cH+8cGXmeP9I/vbmasdui1p5iXG65PbT/otV+vBkd3B/vHBl/nj/VdqR6+WOU3SnEuM16d3np7UblNOvZckvUuJ8frs7tOT2o3XqfeSpHcpMV6f//BMkiovMV5f3HsmSZWXGK8vf3wmSZWXGK/up+eSVHmJ8fr65+eSVHmJ8ZKkEA3HawtQPeMFhGS8gJCMFxCS8QJCMl5ASMYLCMl4ASEZLyAk4wWEZLzOp2k7SeXln1DG63yatrv/8A9JJRmvijRt93SzkVSS8apI03aby0tJJRmvijRtd/nihaSSjFdFmrZ78fKlpJKufrwWi8XgBoWatnv56pWkkq7xlZfxOlXTdq9fvxm3WCwGX+7lD46vsBgZXyH5/yDV1nW98uo/PfbH80cGP7qd3/w1bffm7dt++8ekf2RwwqGDg4skf+jQXaT6O9PbxsEM7dcqecJs33ge+sXIPA7JHxo/mPmHdG6PM/8PVY/X3Fz5eCVv5F8Cz/bBJ5zzjdf4GWK8Bk4dr/FvCYNJKrxC8rcWqNw0r7zyJ8z2yVM+XvmXSIM/Q8y8pDJexFX128a5PYsKx+vow5Icu8yZxouIrnG8tv99gZD8o5ZD9xofnIOS8Tr6GjZ5zqGH1HgRl39hX5HxL0byDwqTbwZL3h5mzszfHSpkvCpy9BcD2DNeFTFeUM54VcR4QTnjVRHjBeWMV0WMF5QzXhWZ/OMMpFjln1DGCwjJeAEhGS8gJOMFhGS8gJCM1/lM/nc3UqzyTyjjdT5N203+EepSlIxXRZq2m/wj1KUoGa+KNG03+UeoS1EyXhVp2m7yj1CXomS8KtK03eQfoS5F6erHa7bfxPndNW03+UeoS1G6xldexutUTdtN/hHqUpSu65VXyTdZP/Td2QeXmo+m7Sb/CHUpSmd623j0Q2t8etDW9/OCU1Q9XnNjvKDc+cYr+Sle43ttjRdQYJpXXvkTjBdwVNVvG+e2YsYLyl3jeG3/fbfYvz04cuhe44NzYLygnH9hXxHjBeWMV0WMF5QzXhUxXlDOeFXEeEE541UR4wXljFdFjBeUM14VmfzjDKRY5Z9QxgsIyXgBIRkvICTjBYRkvICQjBcQkvECQjJeQEjGCwjJeAEhGS8gJOMFhGS8gJCMFxCS8QJCMl5ASMYLCMl4ASEZLyAk4wWEZLyAkIwXEJLxAkIyXkBIxgsIyXgBIRkvICTjBYRkvICQjBcQ0mCs/gFIPbJmjG6mpAAAAABJRU5ErkJggg==32487

vietits
7 Mar 2012, 11:28 PM
Ext.form.Basic.setValues({key: value,...}) only sets value to the first field which id or name matchs the key.

willsun52000
7 Mar 2012, 11:44 PM
actually what I really want to know is how to set the value to the second field

vietits
8 Mar 2012, 12:22 AM
You asked why then you said in fact what you want is how:). Here is how:


var textFields = <your form>.query('textfield[name=hello]') || [];
for (var i = 0, l = textFields.length; i < l; i++){
textFields[i].setValue('your value here');
}

willsun52000
8 Mar 2012, 2:00 AM
Thanks vietits for your solution.
Another question is how to specify the sequence of mapping. I tried to set the first fieldset using hide method, however the second one is still unable to be mapped to.

vietits
8 Mar 2012, 2:13 AM
I'm not sure what you mean. Can you clarify it more details?

willsun52000
11 Mar 2012, 11:55 PM
I'm not sure what you mean. Can you clarify it more details?
let me clarify it through the following example.
I have a form panel which contains two fieldsets, I want to control which fieldset should be visible for user according to response value.
my question is when I want to hide the first fieldset, and keep the second one visible for user, however the value is unable to be mapped to field1 and field2. Is there a solution for this issue? absolutely, your previous solution can figure this issue out, I am trying to find out an easier way. Thanks


var indicators1 = Ext.create('Ext.form.FieldSet', {
title : 'Indicators',
itemId : 'indicatorset1',
collapsible: true,
layout : 'column',
hidden : true,
defaults : {
labelWidth : 210,
labelStyle: 'font-size: 11px;',
fieldStyle: 'font-size: 11px;'
},
items : [ {
xtype: 'textfield',
name: 'field1',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field2',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field3',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field4',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
} ]
});

var indicators2 = Ext.create('Ext.form.FieldSet', {
title : 'Indicators',
itemId : 'indicatorset2',
collapsible: true,
layout : 'column',
defaults : {
labelWidth : 210,
labelStyle: 'font-size: 11px;',
fieldStyle: 'font-size: 11px;'
},
items : [ {
xtype: 'textfield',
name: 'field2',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field1',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field5',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field6',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
} ]
});

Ext.create('Ext.form.Panel', {
height: 250,
width: 400,
bodyPadding: 10,
title: 'My Form',
items: [indicators1, indicators2]
});

vietits
12 Mar 2012, 1:20 AM
One solution for your request is making your form contains one indicator fieldset at a time and writing a function to switch between two indicator fieldsets basing on your condition. Below is my example basing on your code.


Ext.onReady(function() {


var indicators1 = Ext.create('Ext.form.FieldSet', {
title : 'Indicators 1',
itemId : 'indicatorset1',
collapsible: true,
layout : 'column',
hidden : false,
defaults : {
labelWidth : 210,
labelStyle: 'font-size: 11px;',
fieldStyle: 'font-size: 11px;'
},
items : [ {
xtype: 'textfield',
name: 'field1',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field2',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field3',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field4',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
} ]
});


var indicators2 = Ext.create('Ext.form.FieldSet', {
title : 'Indicators 2',
itemId : 'indicatorset2',
collapsible: true,
layout : 'column',
defaults : {
labelWidth : 210,
labelStyle: 'font-size: 11px;',
fieldStyle: 'font-size: 11px;'
},
items : [ {
xtype: 'textfield',
name: 'field2',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field1',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field5',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
}, {
xtype: 'textfield',
name: 'field6',
fieldLabel: 'item',
anchor: '100%'
}, {
xtype : 'displayfield',
columnWidth: 0.1
} ]
});

function switchFieldSet(switchKey){
var fieldSet1 = indicators1;
var fieldSet2 = indicators2;
var insertPos = 0;

if(switchKey){
fieldSet1 = indicators2;
fieldSet2 = indicators1;
}

form.remove(fieldSet1, false);
form.insert(insertPos, fieldSet2);
fieldSet1.hide();
fieldSet2.show();

form.getForm().setValues({
field1: 'field1',
field2: 'field2',
field3: 'field3',
field4: 'field4',
field5: 'field5',
field6: 'field6',
});
}

var form = Ext.create('Ext.form.Panel', {
tbar: {
items: [{
text: '1 -> 2',
handler: function(){
switchFieldSet(false);
}
},{
text: '1 <- 2',
handler: function(){
switchFieldSet(true);
}
}]
},
autoScroll: true,
height: 250,
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
title: 'My Form',
items: [indicators1, {
xtype: 'combobox',
queryMode: 'local',
store: ['Value 1', 'Value 2', 'Value 3'],
value: 'Value 2'
}]
});
});