使用sencha-touch控件制作布局的平板电脑界面

最新推荐文章于 2020-02-25 01:15:10 发布

CF西西

最新推荐文章于 2020-02-25 01:15:10 发布

阅读量960

点赞数

文章标签： stylesheet string flex action function ui

本文链接：https://blog.csdn.net/xiaoguang44/article/details/6930221

版权

P.S由于国内twitter上不去，所以没有数据显示

效果如下：

html页面上的js引用：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">Pandora</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"/>
    <!--<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>-->
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app/view/index.js"></script>
</head>
<body>

</body>
</html>

index.js中代码

Ext.application({
    name: 'Sencha',

    launch: function () {

        Ext.regModel('Tweet', {
            fields: [{
                name: 'id',
                type: 'int'
            }, {
                name: 'profile_image_url',
                type: 'string'
            }, {
                name: 'from_user',
                type: 'string'
            }, {
                name: 'text',
                type: 'string'
            }]
        });

        var store = new Ext.data.Store({
            model: 'Tweet',
            proxy: {
                url: 'http://search.twitter.com/search.json',
                type: 'scripttag',
                extraParams: {
                    rpp: 50,
                    suppress_response_codes: true
                },
                reader: {
                    root: 'results'
                }
            }
        });

        store.getProxy().extraParams.q = 'ipad';
        store.read();

        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'hbox',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    height: 50,
                    scrollable: {
                        direction: 'horizontal',
                        indicators: false
                    },
                    items: [
                        { ui: 'back', text: 'Back' },
                        { text: 'Default' },
                        { ui: 'round', text: 'Round' },

                        { xtype: 'spacer' },

                        {
                            xtype: 'segmentedbutton',
                            items: [
                                { text: 'Option 1' },
                                { text: 'Option 2', pressed: true },
                                { text: 'Option 3' }
                            ]
                        },

                        { xtype: 'spacer' },

                        { ui: 'action', text: 'Action' },
                        { ui: 'forward', text: 'Forward' },
                        {
                            xtype: 'segmentedbutton',
                            allowMultiple: true,
                            items: [
                                { text: 'Toggle 1', pressed: true },
                                { text: 'Toggle 2', pressed: true },
                                { text: 'Toggle 3' }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'list',
                    disclosure: true,
                    onItemDisclosure: {
                        scope: 'test',
                        handler: function (record, btn, index) {
                            store.getProxy().extraParams.q = 'ipad';
                            store.read();
                        }
                    },                   
                    itemSelector: '.tweet',
                    tpl: '<tpl for="."><div class="tweet">{id} - {from_user}</div></tpl>',
                    store: store,
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'message preview',
                    flex: 2
                }
            ]
            });

            //Ext.Viewport.add(panel);
    }
});

CF西西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用sencha-touch控件制作布局的平板电脑界面

P.S由于国内twitter上不去，所以没有数据显示效果如下：html页面上的js引用： Pandora --> index.js中代码Ext.application({ name: 'Sencha', launch: fun
复制链接

扫一扫