在Sencha Touch

时间:2015-06-23 15:55:50

标签: cordova sencha-touch datatables sencha-touch-2 pouchdb

我正在尝试在Sencha Touch 2 + Phonegap应用程序中创建一个表。 我正在使用PouchDB来获取表格的数据,而不是商店 - 我可以逃脱吗?

我确实找到了example这个,但是需要做很多工作才能把它带到我想要的地方。具体来说,我希望能够排序过滤各个列。我还想在一个列中放置一个togglefield组件。

我认为使用datatables会是一种更好的方法,因为它有很多我需要的功能,看起来不错。将数据表与Sencha Touch集成是否可行,还是有更好的方法?

另外,在移动应用程序中使用数据表是否具有良好的UI / UX决策?我希望Sencha Touch组件更适合这种情况。

容器视图:

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>'
        )   
    }   
});

显示数据 - 虽然将来它会来自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'}                                                           
                    ]                                                                             
                }                                                                                 
            ]                                                                                     
        }                                                                                         
        ]                                                                                         
    };       

如果要使用数据表,我该如何将其合并到我的应用程序中。我只是创建一个JS文件并在那里插入这一行吗?

$(document).ready(function() {
    $('#my-table').DataTable();
} );

我对Sencha Touch很新。任何建议都表示赞赏。

0 个答案:

没有答案