如何制作sencha touch List显示界面

最新推荐文章于 2024-10-16 16:57:11 发布

CF西西

最新推荐文章于 2024-10-16 16:57:11 发布

阅读量3.5k

点赞数

文章标签： list stylesheet function class action ui

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

版权

点击后的效果：

目录结构：

index.htm代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>List View</title>
    <link rel="stylesheet" href="sencha/1.0.1a/sencha-touch.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen"/>

    <script src="sencha/1.0.1a/sencha-touch.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascripts/index.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascripts/data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

</body>
</html>

index.js代码

ListDemo = new Ext.Application({
    name: "ListDemo",

    launch: function () {
        ListDemo.detailToolbar = new Ext.Toolbar({
            items: [{
                text: 'back',
                ui: 'back',
                handler: function () {
                    ListDemo.Viewport.setActiveItem('listwrapper', { type: 'slide', direction: 'right' });
                }
            }]
        });

        ListDemo.RightPanel= new Ext.Panel({
            id: 'rightPanel',
            tpl: 'Hello,world!'
            //dockedItems: [ListDemo.detailToolbar]
            
        });



        ListDemo.sss = new Ext.List({
            id: 'sss',
            store: ListDemo.ListStore,
            itemTpl: '<div class="contact">{firstName}{lastName}</div>',
            grouped: true
            //            onItemDisclosure: function (record) {
            //                var name = record.data.firstName + " " + record.data.lastName;
            //                ListDemo.detailToolbar.setTitle(name);
            //                ListDemo.detailPanel.update(record.data);
            //                ListDemo.Viewport.setActiveItem('detailpanel');
            //            }
        });


        ListDemo.detailPanel = new Ext.Panel({
            id: 'detailpanel',
            tpl: '<div class="contact">{firstName}{lastName}</div>',
            dockedItems: [ListDemo.detailToolbar],
            items: [ListDemo.sss]


        });


        ListDemo.ListPanel = new Ext.List({
            id: 'indexlist',
            store: ListDemo.ListStore,
            itemTpl: '<div class="contact">{firstName}{lastName}</div>',
            grouped: true,
            onItemDisclosure: function (record) {
                var name = record.data.firstName + " " + record.data.lastName;
                ListDemo.detailToolbar.setTitle(name);
                //ListDemo.detailPanel.update(record.data);
                ListDemo.Viewport.setActiveItem('detailpanel');
            }
        });


        
        ListDemo.listWrapper = new Ext.Panel({
            id: 'listwrapper',
            layout: 'hbox',
            items: [ListDemo.ListPanel,ListDemo.RightPanel],
            dockedItems:[{
                    xtype:'toolbar',
                    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' }
                            ]
                        }
                    ]
                                
                }]
        });



        
        
        ListDemo.Viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardSwitchAnimation: 'slide',
            items: [ListDemo.listWrapper, ListDemo.detailPanel]
        });

    }
});

data.js代码

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

ListDemo.ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters:'lastName',
    getGroupString: function (record) {
        return record.get('lastName')[0];
    },
    data: [
        { firstName: "Domino", lastName: "Derval" },
        { firstName: "Elektra", lastName: "King" },
        { firstName: "Fiona", lastName: "Volpe" },
        { firstName: "Holly", lastName: "Goodhead" },
        { firstName: "Honey", lastName: "Rider" },
        { firstName: "Jill", lastName: "Masterton" },
        { firstName: "Kissy", lastName: "Suzuki" },
        { firstName: "Mary", lastName: "Goodnight" },
        { firstName: "Miranda", lastName: "Frost" },
        { firstName: "Molly", lastName: "Warmflash" },
        { firstName: "Paula", lastName: "Caplan" },
        { firstName: "Penelope", lastName: "Smallbone" },
        { firstName: "Plenty", lastName: "O'Toole" },
        { firstName: "Pussy", lastName: "Galore" },
        { firstName: "Strawberry", lastName: "Fields" },
        { firstName: "Sylvia", lastName: "Trench" },
        { firstName: "Tatiana", lastName: "Romanova" },
        { firstName: "Tilly", lastName: "Masterton" },
        { firstName: "Vesper", lastName: "Lynd" },
        { firstName: "Xenia", lastName: "Onatopp" }
    ]
});