maceido
26 Sep 2008, 1:03 AM
With DataView we can have a list of articles to sell like this:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>{articleTitle}</p>',
'<p>Price: {articlePrice} Euros</p>',
'<p>Quantity: <input type="text" name = "quantity"/></p>',
'<p><input type="submit" value = "Buy" onClick="buy({articleId})"/></p>',
'</tpl>'
);Note that there is a textfield and a button for each item.
See one more elaborated screenshot (not using extjs):
http://www.thebagin.net/nova/shows/images/e_shop.jpg
However, with Ect.XTemplate we cannot put ExtJs components, such as Ext.Button or Ext.form.ComboBox. Instead, we can put ExtJs components in a ExtJS grid;
however as colspan and rowspan are not supported, each item must be in one row.
Would it be possible to implement a DataView that renders the item using a Ext.Component, rather than using XTemplate?
For instance, something like:
car itemRenderer = {
xtype: 'myItemComponent',
showPrice: true,
width: 200
};
var dataView = new Ext.DataView({
store: store,
itemRenderer: itemRenderer,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
});then, DataView would instantiate a myItemComponent (for each item)
and pass the config {showPrice: true, width: 200, itemData:...}
where itemData would be the data for that item retrieved from the store.
Would that be possible?
Regards,
David
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>{articleTitle}</p>',
'<p>Price: {articlePrice} Euros</p>',
'<p>Quantity: <input type="text" name = "quantity"/></p>',
'<p><input type="submit" value = "Buy" onClick="buy({articleId})"/></p>',
'</tpl>'
);Note that there is a textfield and a button for each item.
See one more elaborated screenshot (not using extjs):
http://www.thebagin.net/nova/shows/images/e_shop.jpg
However, with Ect.XTemplate we cannot put ExtJs components, such as Ext.Button or Ext.form.ComboBox. Instead, we can put ExtJs components in a ExtJS grid;
however as colspan and rowspan are not supported, each item must be in one row.
Would it be possible to implement a DataView that renders the item using a Ext.Component, rather than using XTemplate?
For instance, something like:
car itemRenderer = {
xtype: 'myItemComponent',
showPrice: true,
width: 200
};
var dataView = new Ext.DataView({
store: store,
itemRenderer: itemRenderer,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
});then, DataView would instantiate a myItemComponent (for each item)
and pass the config {showPrice: true, width: 200, itemData:...}
where itemData would be the data for that item retrieved from the store.
Would that be possible?
Regards,
David