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=;i<;i++){

                var r = Math.floor(Math.random() * );

                var g = Math.floor(Math.random() * );

                var b = Math.floor(Math.random() * );

                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:

                }

            ]

        });

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

    }

});