dataview 元件使用示例

來自《sencha touch 權威指南》

-------------------------------

例子1——app.js程式碼如下：

Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        
        var calcData = function(){
            var data = [];
            var item = {};
            for (var i=0;i<30;i++){
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);
                item = {
                    id: i,
                    rgb: Ext.util.Format.format('rgb({0},{1},{2})',r,g,b)
                };
                data[i] = item;
            };
            return data;
        };

        var initData = calcData();
        var store = Ext.create('Ext.data.Store',{
            data: initData,
            fields: ['id','rgb']
        });

        var dataViewTpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="paul">',
            '<div>',
            '<div style="background:{rgb};width:100%;height:15px;color:#EEE;font-size:small;">',
            '</div>',
            '</div>',
            '</div>',
            '</tpl>'
        );

        var myToolbar = Ext.create('Ext.Toolbar',{
            docked: 'top',
            items: [{
                text: '改變顏色',
                handler: function(){
                    var newData = calcData();
                    store.setData(newData);
                }
            }]
        });

        var myPanel = Ext.create('Ext.Panel',{
            id: 'myPanel',
            items: [
                myToolbar,
                {
                    xtype: 'dataview',
                    itemTpl: dataViewTpl,
                    store: store,
                    height: 350
                }
            ]
        });

        Ext.Viewport.add(myPanel);
    }
});

 例子2——app.js程式碼：

Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        
        var store = Ext.create('Ext.data.Store',{
            fields: ['name','url'],
            data:[{
                name: 'HTML5 權威指南',
                url: 'images/51.jpg'
            },{
                name: 'JS高階程式設計',
                url: 'images/52.jpg'
            }]
        });

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<div style="font-size:12px;"><img src="{url}" title="{name}" /><br />{name}</div>',
            '</tpl>'
        );

        var dataview = Ext.create('Ext.DataView',{
            fullscreen: true,
            scrollable: 'vertical',
            store: store,
            itemTpl: tpl
        });

        Ext.Viewport.add(dataview);
    }
});