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

发布时间：2020-12-15 01:07:09 所属栏目：百科来源：网络整理

导读：P.S由于国内twitter上不去，所以没有数据显示效果如下： html页面上的js引用： htmlhead meta http-equiv="Content-Type" content="text/html; charset=utf-8" title id="page-title"Pandora/title meta name="viewport" content="width=device-width; init

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',{
                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' }
                            ]
                        },{ ui: 'action',text: 'Action' },{ ui: 'forward',text: 'Forward' },allowMultiple: true,items: [
                                { text: 'Toggle 1',{ text: 'Toggle 2',{ 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);
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!