如何制作sencha touch List显示界面
来源:互联网 发布:linux 新建用户 编辑:程序博客网 时间:2024/05/21 18:37
点击后的效果:
目录结构:
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" } ]});
- 如何制作sencha touch List显示界面
- 使用sencha touch控件制作list界面
- 如何使用sencha-touch控件显示平板上的tab界面
- Sencha Touch中如何alert显示一个sencha对象?
- 使用sencha-touch控件制作布局的平板电脑界面
- sencha-touch-1.1制作ipad图表游览界面
- sencha touch 2制作滑动DataView(无缝list)
- sencha touch list分页
- sencha touch list分页
- sencha touch中list如何撑满整个view
- 如何在Sencha Touch List Item中添加一个Button
- Sencha touch中Ext.List如何高度自适应的解决方法
- 如何在sencha-touch barchart中的column上显示文字
- Sencha Touch 2中如何在DataView中显示IndexBar
- sencha touch :Ext.list 使用方法
- sencha touch :Ext.list 使用方法
- sencha-touch如何集成广告
- sencha touch 2 tabpanel中List的不显示问题,解决方案
- VS.net 安装包制作
- 购物车(2)
- RackUnit.xaml_New
- ADS1.2进行嵌入式软件开发(ZT)
- 自定义标签中tagsupport的一些方法
- 如何制作sencha touch List显示界面
- Android Audio代码分析27 - Strategy 优先级
- MainPage.xaml
- oracle有关varchar2和char的定义方式区别
- jsp 响应内容不完整
- 20111107阴
- 购物车(3)
- ComputerRack.xaml_NEW
- android editText 自定义边框