View Full Version : How To Use FormPanel with a XTemplate?

15 Aug 2011, 10:47 AM
I have been messing around with this for a few day and needed to post to see if anybody has advice.
I would like to use a form panel with a custom layout, XTemplate. Everything in the API docs seems to say, yes you can use and XTemplate with the form panel but I'm just not able to get it to load. No errors and it load the template just fine just not binding data.

I have tried/change a lot of little things and just messed around with it but no luck. Does anybody know a good article or post that could give me some guidance?

Ext.regModel('AssetDetailsModel', {
fields: [
{ name: 'address', type: 'string', defaultValue: 'DOOOD F___ING WORK!' },
{ name: 'price', type: 'string' }
//{ name: 'age', type: 'int' },
// { name: 'phone', type: 'string' },
// { name: 'alive', type: 'boolean', defaultValue: true }

changeName: function() {
alert('name changed');
// var oldName = this.get('name'),
// newName = oldName + " The Barbarian";

// this.set('name', newName);
proxy: {
type: 'rest',
url: '/AssetDetails.ashx'

var assetDetails = Ext.create('AssetDetailsModel', { address: 'test', price: 'testP' });
// assetDetails.load();
// var store = new Ext.data.Store({
// model: 'AssetDetailsModel'
// });
// assetDetails.changeName();
var assetDetailsTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="thumb-wrap">',

var assetDetailsForm = Ext.create('Ext.form.FormPanel', {
height: 500,

tpl: assetDetailsTpl,
//url: '/AssetDetails.ashx',
//waitMsg: 'Loading...',
// data: 'AssetDetailsModel'
data: assetDetails
// store: store

16 Aug 2011, 12:44 PM
Please use code tags when posting code (# button on the editor toolbar).

I could be wrong but I don't believe this is an appropriate use of tpl. That option is used in conjunction with the data config option or the update() method. It doesn't use a full-blown model, it just takes a JavaScript object and pulls out the properties. See the docs for XTemplate for example data.

I think maybe a view might be better:


What features of a form panel do you require?