PDA

View Full Version : RowExpander with editing facility



priyapratheep
11 Sep 2013, 11:53 PM
Hi I am working with Rowexpander in grid panel. Need to use template with text field or any editable text box .Below is my Template. Anybody give me suggestion to do this and i need to send the edited value back to servlet for saving.


var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p> {comment}</p>'
)
});

Any suggestions greatly appreciated

Thanks
Priya

slemmon
13 Sep 2013, 1:59 PM
You can put any valid HTML in the row expander body that you'd like. You could also put a button with a click listener that does an Ext.Ajax.request() and sends the info from your form fields up to the server.

priyapratheep
15 Sep 2013, 11:03 PM
Thanks Slemmon...

I changed my rowexpander as below


var expander = new Ext.ux.grid.RowExpander({
tpl: new Ext.Template(
'<p><b></b> <input type="text" id="cmd" name = "cmd" value = "{comment}"</p>',
{compiled: true}

)
});


Now I can edit the filed ,I don't know how to save the grid values.
I usually do like below at the time of saving the records to database through JSON


for (var i=0;i<bidAssessmentStore.getCount();i++){
var record=bidAssessmentStore.getAt(i);

bidAssessmentdata.qnId=record.data.qnId;


how can i get the values of rowexpander text box value?

Thanks

slemmon
16 Sep 2013, 2:12 PM
Id's have to be unique on a page. You will run into trouble if your id is 'cmd' for all generated input fields.

You may want to use another attribute ('name' for example) instead of id and use Ext.DomQuery to find the fields and retrieve their values:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.DomQuery

You can submit those up to your server using Ext.Ajax.request().

But, without you embedding in the input field something relating to the record that row was generated with you may find it difficult to differentiate one input field and its value from the next.

priyapratheep
17 Sep 2013, 7:46 PM
No I changed my template to


var expander = new Ext.ux.grid.RowExpander({
tpl: new Ext.Template(
'<p><b></b><div id="myDiv" class="myCls"> <input type="text" id = "cmd"'+"{qnId}"+'" name = "cmd"'+"{qnId}"+'" value = "{comment}"</ div></p>',
{compiled: true}

)
});


Can anybody help me how to retrieve the value of template text box value through either by id or name
How can i do this with domquery.

var elementosDom = Ext.DomQuery.select("input[type=text]");

slemmon
18 Sep 2013, 12:47 PM
What if you were to have a field in your data model (Ext.data.Model) that is used to sync with the <input> values. When a value is entered / changed in the <input> field it then pushes that values to the record of the row it's associated with.

If you do that then you can use the store's sync operations to save the information back to your server (or any of the store methods used to find values to fetch data locally within the store itself).