View Full Version : <table> in DataView

4 Jan 2012, 6:10 PM
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?

4 Jan 2012, 10:27 PM
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.

5 Jan 2012, 5:13 PM
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.

7 Mar 2012, 3:55 AM
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?


8 Mar 2012, 7:17 PM
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