Creating tables in Sencha Touch

304 views Asked by At

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.

0

There are 0 answers