I'm trying to create a table in a Sencha Touch 2 + Phonegap application. I'm using PouchDB to fetch data for the table, not a Store - can I get away with that?
I did find an example of this, but there's a lot of work that needs to be done to get it to where I want it. Specifically, I want to be able to sort and filter individual columns. I also want to put a togglefield component in a column.
I figured that using datatables would be a better approach, since it has a lot of the features I need and it looks nice. Is it feasible to integrate datatables with Sencha Touch, or is there a better way?
Also, is using datatables in a mobile app a good UI/UX decision? I would expect Sencha Touch components to be better suited for that.
Container View:
Ext.define('App.view.MyTable', {
extend: 'Ext.Container',
alias: 'widget.mytable',
config: {
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<table class="display" id="my-table" cellspacing="0" width="100%">',
'<thead>',
'<tr>',
'<th>ID</th>',
'<th>Name</th>',
'<th>Select</th>',
'</tr>',
'</thead>',
'<tbody>',
'<tpl for="rows">',
'<tr>',
'<tpl for="columns">',
'<td>{html}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</tbody>',
'</table>',
'</tpl>'
)
}
});
Displaying data - though in the future, it will come from PouchDB
var items = {
xtype: 'mytable',
data: [
{
rows: [{
columns: [
{html: 'col 1'},
{html: 'col 2'},
{html: 'col 3'}
]
},
{
columns: [
{html: 'col 4'},
{html: 'col 5'},
{html: 'col 6'}
]
}
]
}
]
};
If datatables is the way to go, how do I go about incorporating it in my application. Do I just create a JS file and stick this line in there?
$(document).ready(function() {
$('#my-table').DataTable();
} );
I'm fairly new to Sencha Touch. Any advice is appreciated.