|
View
|
A mechanism for displaying data using custom layout templates and formatting. DataView uses an Ext.XTemplate
as its internal templating mechanism, and is bound to an Ext.data.Store
so that as the data in the store changes the view is automatically updated to reflect the changes. The view also
provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
mouseover, mouseout, etc. as well as a built-in selection model. In order to use these features, an itemSelector
config must be provided for the DataView to determine what nodes it will be working with. The example below binds a DataView to a Ext.data.Store and renders it into an Ext.panel.Panel. Ext.regModel('Image', {
Fields: [
{name:'src', type:'string'},
{name:'caption', type:'string'}
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
{src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
{src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
{src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.DataView', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
|
SharpKit.AspNetAjax
Ext