<table> in DataView

[dobie_]

Say I have a DataView like this...


Ext.create('Ext.DataView', {
id: 'myData',
itemTpl: '<tr class="dataRow"><td>{someData}</td></tr>',
store: someStore
});


I'd like to put my data in table rows like this. How would I prepend and append the <table> and </table> tags to this component?

[anthoang]

I'm not sure if you can prepend/append the "<table>" tags.

If it's a viable option, you could try and put the table tags in each itemtpl and then set the width of each cell to a static width size. Obviously, this isn't ideal. but if all else fails you could try this.

[dobie_]

Hey anthoang,
I ended up doing what you suggested -- making each row a separate table. It works out just fine :). The DOM is slightly bigger but whatever.

[mrunal]

Even i'm trying to achieve the same thing as dobie,
is there any alternative to this found?
What can i do to add table header row above our dataview?

Thanks,
mrunal

[kostysh]

maybe something like this:


Ext.create('Ext.Container', {
items: [{
xtype: 'table',
items: [
xtype: 'dataview',
id: 'myData',
itemTpl: '<tr class="dataRow"><td>{someData}</td></tr>',
store: someStore
]
}]
});


or you can use Component DataView and create custom table component with dataview ability

Read about Component DataView here: http://docs.sencha.com/touch/2-0/#!/guide/dataview