zoukankan      html  css  js  c++  java
  • 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};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);
        }
    });
  • 相关阅读:
    AI零基础入门之人工智能开启新时代—下篇
    AI零基础入门之人工智能开启新时代—上篇
    Markdown 快速入门
    Linux GCC/G++ 基础(1) 之
    解决 Ubuntu 下使用 sublime text 3 无法输入中文
    WPF:界面布局之- TaiChi
    常用命令之- touch
    微软net平台是不是快完了?看了一天智联招聘,现在连传统的网站或系统平台都不怎么用net了
    蓝牙Ble开发(支持API18<Android 4.3 Jelly>及以上)
    Android系统休眠对程序的影响以及处理
  • 原文地址:https://www.cnblogs.com/phpway/p/3456587.html
Copyright © 2011-2022 走看看