PDA

View Full Version : xTemplete in Formpanel



GeoffreyRen
4 Aug 2010, 7:47 PM
Hi ALL
Open the ext.window in gridpanel. The window contain a formpanel. The formpanel show the XTemplete as body.

The error infomation was "e1 is null " when I append the data into xtenplete.

the error code was following:



doInsert : function(where, el, values, returnEl){
el = Ext.getDom(el);
var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
return returnEl ? Ext.get(newNode, true) : newNode;
}


The e1 parameter value is "consultform". The e1 value was null where execute the command of "el = Ext.getDom(el); "



///<reference path="../ext/vswd-ext_2.0.2.js" />
/**
*
* @class Declassification.ConsultForm
*/
Ext.ns('Declassification');
Declassification.ConsultForm = Ext.extend(Ext.form.FormPanel, {
/**
* ID.
**/
applicationID: ''
/**
* .
**/
, applicationTitle: ''
/**
* ID.
**/
, consultID: ''
/**
* grid store.
**/
, store: null
/**
* record.
**/
, record: null
/**
* form url.
**/
, url: '/DeclassificationConsult/SaveOrUpdate'
/**
* .
**/
, constructor: function (config) {
this.config = config ? config : null;
this.applicationID = config.applicationID ? config.applicationID : '';
this.applicationTitle = config.applicationTitle ? config.applicationTitle : '';
this.consultID = config.consultID ? config.consultID : '';
this.store = config.store ? config.store : null;
this.record = config.record ? config.record : null;
Declassification.ConsultForm.superclass.constructor.call(this, config);
}
/**
* .
**/
, initComponent: function () {
var config = {
border: false
, labelWidth: 40
, frame: true
, bodyStyle: 'padding:5px 5px 0'
, labelAlign: 'right'
, buttonAlign: 'center'
, renderTo: Ext.getBody()
, buttons: [{
text: 'submit'
, formBind: true
, cls: "x-btn-text-icon"
, icon: "/Content/icons/accept.png"
, scope: this
, handler: this.addRecord
}, {
text: 'cancel'
, id: 'cancelFormBtn'
, cls: "x-btn-text-icon"
, icon: "/Content/icons/door_open.png"
, scope: this
, handler: this.cancel
}]
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Declassification.ConsultForm.superclass.initComponent.apply(this, arguments);
}
/**
* .
**/
, onRender: function () {
// call parent
Declassification.ConsultForm.superclass.onRender.apply(this, arguments);
//
this.load();
}
/**
* .
**/
, load: function () {
var tpl = new Ext.XTemplate(
'<div id=consultform>'
, '<table width=500 border=0 cellspacing=0 cellpadding=0 bgcolor=#FFFFFF>'
, ' <tr>'
, ' <td colspan=2 align=center class=STYLE5>'
, ' <span class=STYLE9>Application Form</span><br /><br />'
, ' </td>'
, ' </tr>'
, ' <tr>'
, ' <td width=489 align=right>'
, ' <span class=STYLE6>Code?'
, ' <input type=text id=SerialNumber class=input_text value={SerialNumber} width=108px>'
, ' </span>'
, ' </td>'
, ' <td width=11 align=right>&nbsp;</td>'
, ' </tr> '
, ' <tr>'
, ' <td colspan=2 align=left valign=top>'
, ' <p class=STYLE6>'
, ' <input type=text id=Consult_Name class=input_text value={ConsultName}>?<br />'
, ' ???????????????????????????????????'
, ' <input type=text id=Title class=input_text width=436px value={Title}>&nbsp; ??????'
, ' </p>'
, ' <p class=STYLE6>'
, ' <input type=checkbox name=SecretMode value={SecretMode1} >????????'
, ' <input type=checkbox name=SecretMode value={SecretMode2} >????????'
, ' </p>'
, ' <p class=STYLE6>'
, ' &nbsp; &nbsp;?????????????????????????????????????????????????????????????'
, ' </p>'
, ' <p class=STYLE6>'
, ' &nbsp; &nbsp;???????<input type=text id=CreateTime class=input_text value={CreateTime} width=184px>&nbsp;'
, ' ?????????????????????'
, ' </p>'
, ' <p class=STYLE6>'
, ' ??????????????2?, ?????200002??????????????)?'
, ' </p>'
, ' <p class=STYLE6>'
, ' &nbsp;'
, ' </p>'
, ' </td>'
, ' </tr>'
, ' <tr>'
, ' <td align=right><p class=STYLE6><br />'
, ' ????????????<br />'
, ' <input type=text id=productName4 class=input_text width=149px>'
, ' </td>'
, ' <td>&nbsp;</td>'
, ' </tr>'
, ' <tr>'
, ' <td colspan=2>&nbsp;</td>'
, ' </tr>'
, ' <tr>'
, ' <td colspan=2>&nbsp;</td>'
, ' </tr>'
, '</table></div>'
);
debugger;
var data;
var cDate;
if (this.record) {
var fDate = new Date(this.record.data.FeedbackDate).format("Y-m-d");
cDate = new Date(this.record.data.CreateTime).format("Y-m-d");
data = {
SerialNumber: this.record.data.SerialNumber
, ConsultName: this.record.data.ConsultName
, Title: this.record.data.Title
, FeedbackDate: fDate
, SecretMode1: this.record.data.SecretMode
, SecretMode2: this.record.data.SecretMode
, CreateTime: cDate
};
} else {
cDate = new Date().format("Y-m-d");
data = {
SerialNumber: ''
, ConsultName: ''
, Title: this.applicationTitle
, FeedbackDate: ''
, SecretMode1: ''
, SecretMode2: ''
, CreateTime: cDate
};
}

tpl.append("consultform", data);
tpl.compile();

//??????
tpl.overwrite(this.body, null);
}
/**
* ????????.
**/
, addRecord: function () {
if (this.getForm().isValid()) {
this.getForm().submit({
url: this.url
, scope: this
, success: this.onSuccess
, failure: this.onFailure
, params: {
'applicationId': this.applicationID
, 'Id': this.consultID
}
, waitMsg: '??????...'
});
}
}
/**
* ????.
*/
, cancel: function () {
this.ownerCt.close(); // ????
}
/**
* Request????.
**/
, onSuccess: function (form, action) {
Ext.Msg.show({
title: '??'
, msg: '??????'
, modal: true
, icon: Ext.Msg.INFO
, buttons: Ext.Msg.OK
});
//??????
this.store.setDefaultSort('CreateTime', 'DESC');
this.store.reload({// ????
params: {
start: 0,
limit: ALL_PAGESIZE_SETTING
}
});
this.ownerCt.close();
}
/**
* Request.
**/
, onFailure: function (form, action) {
JsHelper.ShowError(action.result.msg);
}
});
Ext.reg('declassificationconsultform', Declassification.ConsultForm);

Condor
4 Aug 2010, 11:26 PM
What is the purpose of:

tpl.append("consultform", data);