PDA

View Full Version : HTML templates in ExtJS?



jiewmeng
22 May 2012, 5:35 PM
Is it possible for Ext to load a HTML template from a file or something (great if I could still inject variables)? It doesn't feel correct to have a bunch of HTML defined as a string in an Ext.Panel for example?

SebTardif
22 May 2012, 6:02 PM
Ext JS and SmartClient are both products with the design to isolate from you the browser incompatibilities by generating for you the HTML needed. The closer to a template in Ext JS is DataView, where the variables are data from a Store.

jiewmeng
22 May 2012, 6:18 PM
Ok, so here is what I want to acheive:

Imagine a simple CRUD app for say a {model}. I have a sidebar with a list of {model}s. When I select a {model}, I want to view my {model} details (what widget might be suitable for this)? I could use a form and make all fields read only, but that doesn't seem very correct.

SebTardif
22 May 2012, 6:45 PM
When I select a {model}, I want to view my {model} details (what widget might be suitable for this)? I could use a form and make all fields read only, but that doesn't seem very correct.

Using a form, a grid, or a dataview to show the details, all would work. I prefer the form, which is more flexible. The three choices can bind with a model/store, so you there is not much code to write.

Example having a grid and a form: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/FormDashboard.html

jiewmeng
22 May 2012, 7:18 PM
Where is the data binding part? I was looking at the FormDashboard.js (http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/FormDashboard.js) I suppose its somewhere:


var gridForm = Ext.create('Ext.form.Panel', { title: 'Company data',
frame: true,
bodyPadding: 5,
width: 870,
height: 720,


fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},


layout: {
type: 'vbox',
align: 'stretch'
},


items: [{
height: 200,
layout: 'fit',
margin: '0 0 3 0',
items: [barChart]
}, {


layout: {
type: 'hbox',
align: 'stretch'
},
flex: 3,
border: false,
bodyStyle: 'background-color: transparent',


items: [gridPanel,
{
flex: 0.4,
layout: {
type: 'vbox',
align: 'stretch'
},
margin: '0 0 0 5',
title: 'Company Details',
items: [{
margin: '5',
xtype: 'fieldset',
flex: 1,
title: 'Company details',
defaults: {
width: 240,
labelWidth: 90,
disabled: true
},
defaultType: 'numberfield',
items: [{
fieldLabel: 'Name',
name: 'company',
xtype: 'textfield'
}, {
fieldLabel: 'Price',
name: 'price',
maxValue: 100,
minValue: 0,
enforceMaxLength: true,
maxLength: 5,
listeners: createListeners('price')
}, {
fieldLabel: 'Revenue %',
name: 'revenue %',
maxValue: 100,
minValue: 0,
enforceMaxLength: true,
maxLength: 5,
listeners: createListeners('revenue %')
}, {
fieldLabel: 'Growth %',
name: 'growth %',
maxValue: 100,
minValue: 0,
enforceMaxLength: true,
maxLength: 5,
listeners: createListeners('growth %')
}, {
fieldLabel: 'Product %',
name: 'product %',
maxValue: 100,
minValue: 0,
enforceMaxLength: true,
maxLength: 5,
listeners: createListeners('product %')
}, {
fieldLabel: 'Market %',
name: 'market %',
maxValue: 100,
minValue: 0,
enforceMaxLength: true,
maxLength: 5,
listeners: createListeners('market %')
}]
},
radarChart]
}]
}],
renderTo: bd
});