PDA

View Full Version : Creating dynamic fields



sagardash
8 Sep 2010, 3:43 AM
Hi,

Here i am trying to create dynamic fields.Its sending every fields names to the backend. so i think it ll store in the database.

but the designing is not good. its not like extjs.. because i wrote some javascript and inside that HTML.



22276



So can any one please help regarding designing...
how i ll convert that javascript to extjs code...

please i need help..

THANKS

Condor
8 Sep 2010, 3:46 AM
You can simply add() components to a FormPanel (and call doLayout() after that).

sagardash
8 Sep 2010, 4:22 AM
Sorry condor, i didnt get....

Is that add(), a inbuilt function of extjs Formpanel.
can u please give me one example..

Sorry

Condor
8 Sep 2010, 4:38 AM
var count = 0;
button.on('click', function(){
count++;
formPanel.add({
xtype: 'textfield',
fieldLabel: 'Field ' + count
});
formPanel.doLayout();
});

sagardash
8 Sep 2010, 6:05 AM
Thanks a lot condor ...
I implement it successfully and its working fine ...

Can you please tell me how to remove the added fields..


THANKS A LOT

Condor
8 Sep 2010, 6:11 AM
With remove() or removeAll() (see the API docs for details).

sagardash
9 Sep 2010, 9:46 PM
Here i am trying to remove the added field.. did i write it correctly ?

can you please tell me.. THANKS



items: [{
xtype: 'button',
text: 'ADD',
id: 'add',
handler: function () {
count++;
simple.add({
xtype: 'textfield',
fieldLabel: 'First Name' + count
});
simple.add({
xtype: 'button',
handler: function () {
simple.remove({});
}
});
simple.doLayout();
}

Condor
9 Sep 2010, 10:54 PM
You obviously need to specify what to remove:

items: [{
xtype: 'button',
text: 'ADD',
id: 'add',
handler: function () {
count++;
var field = simple.add({
xtype: 'textfield',
fieldLabel: 'First Name ' + count
});
simple.add({
xtype: 'button',
handler: function () {
simple.remove(field);
}
});
simple.doLayout();
}

sagardash
12 Sep 2010, 10:21 PM
22348

Here if i will click on first remove button then its removing one textfield and one button but along that last remove button is also going.(like bellow images)

22349

can you please help me regarding this.. Bellow is my code .PLEASE

Ext.onReady(function () {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();
var count = 0;

var simple = new Ext.FormPanel({
url: 'save-form.php',
id: 'test',
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 500,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
border: false,

items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',

}]
},
{
columnWidth: .5,
border: false,
items: [{
xtype: 'button',
id: 'add',
iconCls: 'add',
handler: function () {
count++;
var field1 = simple.add({
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name' + count
}]
},
{
columnWidth: .5,
items: [{
xtype: 'button',
id: 'rem',
cls: 'x-btn-icon',
iconCls: 'remove',
handler: function () {
alert(count);
simple.remove(field1);
//count--;
}
}]
}]
}]
});
simple.doLayout();
}
}]
}]
}],
buttons: [{
text: 'Save',
handler: function () {
Ext.getCmp('test').getForm().submit({
url: 'backend.php',
method: 'POST',

});
}
},
{
text: 'Cancel'
}]
});

simple.render(document.body);


});

Condor
12 Sep 2010, 11:22 PM
'id's need to be unique.

You should remove id:'rem' (I don't even see why you need it).

sagardash
13 Sep 2010, 2:20 AM
thanks condor.

can u please tell me how to catch those unique ids of textfields .. because i want to put those ids in one string and send to the back end.

can it possible. THANKS

Condor
13 Sep 2010, 2:48 AM
No, the textfield can keep it's id (it's autonumbered, so it should be unique).

ps. Why are you even using ids and not names?

sagardash
13 Sep 2010, 5:54 AM
condor can you please help me in getting the id of added fields ... so that i can put it one string and send it to backend . because in backend i dont know the name of dynamically created fields .

Condor
13 Sep 2010, 5:56 AM
What kind of data does your backend expect?

sagardash
13 Sep 2010, 6:03 AM
If we have dynamic fields for firstname, lastname,email etc .

I want to save those dynamic fields in different columns of a table . but i dont know how to differentiate those lastname ,firstname,email in $_REQUEST array . because i dont know the lebels of those dynamic fields ..

sagardash
13 Sep 2010, 10:03 PM
I think u didnt get my question ..

I am sending multiple firstname,lastname,email to backend .. how i will insert into one table ?

please help me ..

sagardash
13 Sep 2010, 11:28 PM
Hi condor,

can you please tell me why that count is not incrementing and remove is not working ....


Ext.onReady(function () {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();
var count = 0;

var add_field = {
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name' + count,
name: 'first_sa[]'
}]
}
var remove_field = {
columnWidth: .5,
items: [{
xtype: 'button',
cls: 'x-btn-icon',
text: 'asd' + count,
handler: function () {
alert(count);
simple.remove(add_field);
simple.remove(remove_field);
//count--;
}
}]
}
var simple = new Ext.FormPanel({
url: 'save-form.php',
id: 'test',
frame: true,
url: 'backend.php',
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 500,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
border: false,

items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first_sa[]',
//id:'first0',
}]
},
{
columnWidth: .5,
border: false,
items: [{
xtype: 'button',
id: 'add',
iconCls: 'add',
handler: function () {
alert(count);
count++;
alert(count);
var field1 = simple.add({
items: [{
layout: 'column',
border: false,
items: [add_field, remove_field]
}]
});
simple.doLayout();
}
}]
}]
}],
buttons: [{
text: 'Save',
handler: function () {
Ext.getCmp('test').getForm().submit({

//url: 'backend.php',
//method: 'POST',
});
}
},
{
text: 'Cancel'
}]
});

simple.render(document.body);


});

Condor
13 Sep 2010, 11:49 PM
add_field and remove_field are config object and not components.

You should use:

var add_field = new Ext.Container({...});
var remove_field = new Ext.Container({...});

ps. Your remove button should also remove the field1 container.

sagardash
14 Sep 2010, 1:01 AM
Ext.onReady(function () {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();
var count = 0;

var add_field = {
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name' + count,
name: 'first_sa[]'
}]
}
var remove_field = {
columnWidth: .5,
items: [{
xtype: 'button',
cls: 'x-btn-icon',
//iconCls: 'remove',
text: 'asd' + count,
handler: function () {
alert(count);
simple.remove(add_field);
simple.remove(remove_field);
//count--;
}
}]
}
var simple = new Ext.FormPanel({
url: 'save-form.php',
id: 'test',
frame: true,
url: 'backend.php',
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 500,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
border: false,

items: [
/*{
xtype:'textfield',
fieldLabel: 'string_array1',
name: 'count1',
id:'count1',

},*/
{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first_sa[]',
//id:'first0',
}]
},
{
columnWidth: .5,
border: false,
items: [{
xtype: 'button',
id: 'add',
iconCls: 'add',
handler: function () {
alert(count);
count++;
alert(count);
var field1 = simple.add({
items: [{
layout: 'column',
border: false,
items: [add_field, remove_field]
}]
});
simple.doLayout();
}
}]
}]
}],
buttons: [{
text: 'Save',
handler: function () {
//alert(count);
//create_string([count]);
//Ext.getCmp('count1').setValue(count);
Ext.getCmp('test').getForm().submit({

//url: 'backend.php',
//method: 'POST',
});
}
},
{
text: 'Cancel'
}]
});

simple.render(document.body);


});

sagardash
14 Sep 2010, 1:08 AM
hi condor ,

can we put xtype in one variable and call that in add function like bellow

var add_field = {
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name' + count,
name: 'first_sa[]'
}]
}
var remove_field = {
columnWidth: .5,
items: [{
xtype: 'button',
cls: 'x-btn-icon',
//iconCls: 'remove',
text: 'asd' + count,
handler: function () {
alert(count);
simple.remove(field1);
//simple.remove(remove_field);
//count--;
}
}]
}
handler: function () {
alert(count);
count++;
alert(count);
var field1 = simple.add({
items: [{
layout: 'column',
border: false,
items: [add_field, remove_field]
}]
});
simple.doLayout();
}

Condor
14 Sep 2010, 1:17 AM
Try:

handler: function (btn) {
var field1 = btn.ownerCt.ownerCt;
field1.ownerCt.remove(field1);
}

sagardash
14 Sep 2010, 1:28 AM
Its working fine but i don't get anything from that ...

that count is also not working here..
fieldLabel: 'First Name' + count

Condor
14 Sep 2010, 1:33 AM
You obviously need to change the fieldLabel everytime you add add_field to simple.

sagardash
14 Sep 2010, 1:52 AM
Ya i want to change the filedlabel every time ..
but in that add_field i will add some more fields so i dont want to call that inside simple formpanel ..
like bellow ..
22391
that count will not work there ?

Condor
14 Sep 2010, 2:23 AM
Define the config so it contains the fields you want, but before you add it to the panel you need to modify the fieldLabel.

sagardash
14 Sep 2010, 2:45 AM
for that i think i need to write something like this..

add_field.fieldLabel = 'first name' + count;

but its not working ...

Condor
14 Sep 2010, 3:31 AM
You defined add_field, so you should know which properties should be updated.

sagardash
14 Sep 2010, 3:36 AM
This is my add_field..

how to update ?
is this the proper way

add_field.fieldLabel = 'first name' + count;
or
add_field.label.update('New label');


var add_field = {
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name' ,
name: 'first_sa[]'
}]
}

Condor
14 Sep 2010, 3:48 AM
Use:

add_field.items[0].fieldLabel = 'First name ' + count;

sagardash
14 Sep 2010, 5:09 AM
Thanks condor its working fine and
sorry i am asking you very silly questions everytime...

here i want to put one condition like before adding fields it should check the field is empty or not .. if empty it should not add ..

but i dont have id so i am confused .. can u please help me ..


handler: function () {
count++;
add_field.items[0].fieldLabel = 'First name ' + count;
var field1 = simple.add({
items: [{
layout: 'column',
border: false,
items: [add_field, remove_field]
}]
});
simple.doLayout();
}

sagardash
14 Sep 2010, 5:33 AM
condor can you please help me little ... please

Condor
14 Sep 2010, 5:48 AM
Check if which field is empty?

sagardash
14 Sep 2010, 5:52 AM
but i don't have id .. so how to know which one is empty

Condor
14 Sep 2010, 5:58 AM
here i want to put one condition like before adding fields it should check the field is empty or not .. if empty it should not add ..

'the field is empty or not'... Which field?

sagardash
14 Sep 2010, 6:08 AM
first one default filed will be there ... if that field is empty then it will not add additional fields ..

Condor
14 Sep 2010, 6:13 AM
Configure the fields that shouldn't be blank with allowBlank:false and check if the whole form is valid before adding a new row, e.g.

var form = btn.findParentByType('form');
if (form.getForm().isValid()) {
...
}

darthwes
14 Sep 2010, 7:28 AM
foreach($_REQUEST as $key => $val)


Pull the keys off request, pick up the int at the end of the field name, check the inputs for that set of data (assosciated with the int)?