PDA

View Full Version : Ext.DataView & load form - it is posibble?



dizor
26 Aug 2009, 10:50 PM
I have problem with load data into code generated from "DataView".



{"success":true,"data":{"name_categories":"category","name1":"name test"}}


"name_categories" load data into form (xtype: textfield), but "name" (name1, name2...) not... && "this.formPanel.form.reset();" reset only text in "name_categories" (not in "name")

It's possible to do this with it or DataView is only for view - in this case please tell me how i can do it.



this.portView = new Ext.DataView({
store: portStore,
tpl:
'<tpl for=".">' +
'<div class="port-info">' +
'<input type="text" name="{name}" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>'
'</div>' +
'</tpl>',
itemSelector: 'div.port-info'
});




this.test = new Ext.Panel({
bodyStyle: "padding:10px",
border: false,
title: 'Test',
waitMsgTarget: true,
layout: 'form',
items: [ this.portView,
{
xtype: 'textfield',
name: 'name_categories'
}]
});





this.formPanel = new Ext.form.FormPanel({
waitMsgTarget: true,
border: false,
items: this.test
});




this.formPanel.load({
url: '/products/cmd',
method: 'POST',
...
})

dizor
27 Aug 2009, 1:02 AM
I want to make that this way (custom html) because i must have a huge items of combination : combobox, textfield and image.

Condor
27 Aug 2009, 1:08 AM
The inputs that are inserted by the dataview aren't registered as fields in the formPanel.getForm().

Use something like:

portView.getEl().select('input', function(el){
var field = new Ext.form.TextField({
applyTo: el,
allowBlank: false
});
formPanel.getForm().add(field);
});

dizor
28 Aug 2009, 10:15 AM
I think you mean it:



portView.getEl().select('input').each(function(el){ ...


Thanks for help!

dizor
28 Aug 2009, 10:25 AM
I have one more question:



this.portView = new Ext.DataView({
store: portStore,
tpl:
'<tpl for=".">' +
'<div class="port-info">' +
'<input type="checkbox" name="port{portNo}">' +
'<input type="text" name="name" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>' +
'</div>' +
'</tpl>',
itemSelector: 'div.port-info'
});


If I have something like this how i can check type of input?

Edit: i check it with "el.dom.type" but this doesn't work for checkbox... can you help me with that?



if(el.dom.type=='checkbox'){
var field = new Ext.form.Checkbox({
applyTo: el
});
this.formPanel.getForm().add(field);
}

Condor
28 Aug 2009, 10:54 AM
You can add it to the selector:

select('input[type=checkbox]')

dizor
28 Aug 2009, 11:15 AM
Thanks for your help. I have last question ( i hope :) ):



this.portView.getEl().select('input[type=checkbox]').each( function(el, b) {
var field = new Ext.form.Checkbox({
applyTo: el
});
this.formPanel.getForm().add(field);
},this);




tpl:
'<tpl for=".">' +
'<div class="port-info">' +
'<input type="checkbox" name="port{portNo}" autocomplete="off" class=" x-form-checkbox x-form-field" value="1" />' +
'</div>' +
'</tpl>',


Json (create three checkboxes)



{rows:[{"Port_No":"1"},{"Port_No":"2"},{"Port_No":"3"}]}


... but only last (rendered) get value on form load.

Edit:

1) Now i do something like this - and it work, but is this good way to do this?
2) When it can be done (i do this on portStore load) ?



<input type="checkbox" id="port{portNo}" name="port{portNo}" autocomplete="off" class=" x-form-checkbox x-form-field" value="1" />




this.portView.getEl().select('input[type=text]').each( function(el, b) {
var field = new Ext.form.TextField({
applyTo: el.dom.id,
allowBlank: false
});
this.formPanel.getForm().add(field);
},this);

Condor
28 Aug 2009, 10:28 PM
Your store data and field names don't match.

If you have one record for each data item you shouldn't be using this method anyway. It's meant for multiple fields in one record.

dizor
29 Aug 2009, 8:29 AM
Your store data and field names don't match.


With first JSON I generated html - and when I load data on form load with this json - i think this match (it works)

Tpl:



<input type="text" id="name{portNo}" name="name{portNo}" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>


Code which generated from tpl:



<input type="text" id="name1" name="name1" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>
<input type="text" id="name2" name="name2" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>
<input type="text" id="name3" name="name3" autocomplete="off" size="20" class=" x-form-text x-form-field " style="width: 333px;"/>


Load form:



this.formPanel.load({
url: '/products/cmd',
method: 'POST',
...
})




{"success":true,"data":[{"name1":"textfield 1"},{"name2":"textfield 2"},{"name3":"textfield 3"}]}


This work - i must use "el.dom.id" and don't know that is good way to generate input "id".



this.portView.getEl().select('input[type=text]').each( function(el, b) {
var field = new Ext.form.TextField({
applyTo: el.dom.id, (name1, name2, name3...)
allowBlank: false
});
this.formPanel.getForm().add(field);
},this);