View Full Version : Template used to submit a form

8 Feb 2012, 8:41 AM
This code is based on the grid binding with classes example, it defines a specialized Panel that updates the information presented in tplMarkup based on the grid row that is selected in another Panel.

Ext.define('Ext.reports.CallbackReportDetail', {
extend: 'Ext.Panel',
alias : 'widget.reports-callbackReportDetail',
itemId : 'callbackReportDetail',

// add tplMarkup as a new property
tplMarkup: [
'<div align="left"><b>Name:</b> {name}<b><br/>',
'<b>Phone:</b> {telephone}<br/>',
'<b>Email:</b> {email}<br/>',
'<b>Requested Date for Callback:</b> {requestedDate}<br/>',
'<b>Requested Time for Callback:</b> {callTimeName}<br/>',
'<b>Time Request was Made Created:</b> {createdDate}<br/>',
'<b>Category:</b> {category}<br/>',
'<b>Customer Comment:</b> {comments}<br/></div>',
'<br />',
'<br />',
'<input type="text" name="emailTo" value="{email}" size="35"/>',
'<br />',
'<input type="text" name="emailSubj" value="" size="35"/>',
'<br />',
'<br />',
'<textarea rows="15" cols="45" name="emailBody"></textarea>',
'<br />',
'<button type="button" id="btnSendInvite">Send Email Invitation</button>'

// startingMarup as a new property
startingMarkup: 'Controls',

bodyPadding: 40,
frame: 'true',
// override initComponent to create and compile the template
// apply styles to the body of the panel and initialize
// html to startingMarkup
initComponent: function() {
this.tpl = Ext.create('Ext.Template', this.tplMarkup);
this.html = this.startingMarkup;

/*this.bodyStyle = {
background: '#ffffff'
// call the superclass's initComponent implementation
// add a method which updates the details
updateDetail: function(data) {
this.tpl.overwrite(this.body, data);

This works fine for presenting basic data. I want to extend tplMarkup so that the submit button actually submits an ajax request to a remote servlet, amd presents confirmation upon successful submission. I'm familiar with form Panels with Buttons that are able to submit ajax requests, but I'm not sure how to integrate that functionality with tplMarkup in this code. Any pointers would be suggested.

8 Feb 2012, 8:53 AM
Why aren't you adding the textfields as items?

10 Mar 2013, 12:21 AM
I am new in Sencha. Will you please give me some idea / code. How i add store date in text fields inside fieldset.
I can able to do that using list, But not in text fields inside fieldset. Shall i have to use Xtemplate,If yes please let me know the process.

Thanks in advance.:)