1

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.

Community
  • 1
  • 1
pushkin
  • 9,575
  • 15
  • 51
  • 95
  • Did you purchase a commercial license or you are using GPL version? – Baidaly Jun 24 '15 at 14:51
  • No, I did not purchase a commercial license. I noticed they have a Grid, which would help here, but I, unfortunately, can't use it, because of $$. – pushkin Jun 24 '15 at 15:08
  • Then I guess you've seen this custom grid: https://github.com/mitchellsimoens/Ext.ux.touch.grid It's old but maybe you can make it work for you. – Baidaly Jun 24 '15 at 16:06

0 Answers0