【原创】Sencha Touch(extjs) MVC实例——通讯录

转载请注明出处：http://www.cnblogs.com/Jackey_Chen/archive/2011/08/23/2151141.html

Index.hmtl文件中引入的脚本如下：

　　联系人的Model和Store如下：

 1 Ext.regModel('ContactModel', {
 2 
 3     proxy : {
 4         type : 'localstorage',
 5         id   : 'contactModel'
 6     },
 7 
 8     fields : [
 9         'id',
10         'firstName',
11         'lastName',
12         'street',
13         'city',
14         'state',
15         'zip',
16         'phone'
17     ]
18 });
19 
20 Ext.regStore({
21     model   : 'ContactModel',
22     storeId : 'ContactStore'
23 });

　　主程序入口apps.js：

 1 Ext.regApplication({
 2     name   : 'MyApp',
 3     launch : function() {
 4 
 5         new MyApp.AppPanel({
 6             fullscreen : true
 7         });
 8 
 9     }
10 });

在AppPanel中放入一个用于显示联系人信息的'ContactFormPanel'和另外三个组件（buildTopDockToolbar、buildLeftDockList、buildBottomDockToolBar），具体代码如下：

  1 MyApp.AppPanel = Ext.extend(Ext.Panel, {
  2     layout : 'fit',
  3     initComponent : function() {
  4         this.dockedItems = this.buildDockedItems();
  5 
  6         this.items = {
  7             xtype : 'ContactFormPanel'
  8         };
  9         MyApp.AppPanel.superclass.initComponent.call(this);
 10     },
 11 
 12     buildDockedItems : function() {
 13         return [
 14             this.buildTopDockToolbar(),
 15             this.buildLeftDockList(),
 16             this.buildBottomDockToolBar()
 17         ];
 18     },
 19 
 20     buildTopDockToolbar : function() {
 21         return {
 22             xtype : 'toolbar',
 23             dock  : 'top',
 24             title : 'Contact Manager'
 25         };
 26     },
 27 
 28     buildLeftDockList : function() {
 29         return {
 30             xtype  : 'panel',
 31             width  : 220,
 32             dock   : 'left',
 33             layout : 'fit',
 34             style  : 'border-right: 1px solid;',
 35             items  : [
 36                 {
 37                     xtype     : 'ContactList',
 38                     listeners : {
 39                         scope     : this,
 40                         itemtap   : this.onContactListItemTap,
 41                         itemswipe : this.onContactListItemSwipe
 42                     }
 43                 }
 44             ],
 45             dockedItems : [
 46                 {
 47                     xtype : 'toolbar',
 48                     dock  : 'top',
 49                     title : 'Contacts'
 50                 }
 51             ]
 52         }
 53     },
 54 
 55     buildBottomDockToolBar : function() {
 56         return {
 57             xtype    : 'toolbar',
 58             dock     : 'bottom',
 59             defaults : {
 60                 scope      : this,
 61                 handler    : this.onBtnTap,
 62                 controller : 'ContactFormPanelController'
 63             },
 64             items : [
 65                 {
 66                     text   : 'New',
 67                     action : 'newContact'
 68                 },
 69                 {
 70                     text   : 'Save',
 71                     action : 'saveContact'
 72                 },
 73                 {
 74                     xtype : 'spacer'
 75                 },
 76                 {
 77                     text       : 'Delete',
 78                     action     : 'deleteContact',
 79                     controller : 'ContactListController'
 80                 }
 81             ]
 82         };
 83     },
 84     onBtnTap : function(btn) {// default clicked event function
 85         var contactForm = this.items.items[0],
 86             leftDock    = this.getDockedItems()[1],
 87             model       = contactForm.getRecord(),
 88             contactList = leftDock.items.items[0];
 89 
 90         if (btn.action === 'deleteContact' && ! model) {
 91             return;
 92         }
 93 
 94         Ext.dispatch({//buildBottomDockToolBar 调度 配置默认的controller和action
 95             controller : btn.controller,
 96             action     : btn.action,
 97             model      : model,
 98             views      : {
 99                 contactForm : contactForm,
100                 contactList : contactList
101             }
102         });
103     },
104     onContactListItemTap : function(ctList, itemIdx) {
105         this.dispatchToCtcLstCtrlr(ctList, itemIdx, 'itemTap');
106     },
107     onContactListItemSwipe : function(ctList, itemIdx) {
108         this.dispatchToCtcLstCtrlr(ctList, itemIdx, 'deleteContact');
109     },
110     dispatchToCtcLstCtrlr : function(ctList, itemIdx, action) {//ContactListController dispatch调度
111         var contactForm = this.items.items[0];
112 
113         Ext.dispatch({
114             controller : 'ContactListController',
115             action     : action,
116             model      : ctList.store.getAt(itemIdx),
117             views      : {
118                 contactForm : contactForm,
119                 contactList : ctList
120             }
121         });
122 
123     }
124 });

　　buildLeftDockList是xtype为'ContactList'的联系人列表，绑定了两个触发事件（onContactListItemTap、onContactListItemSwipe）。'ContactList'是自定的联系人列表组件。

 1 MyApp.ContactList = Ext.extend(Ext.List, {
 2     store         : Ext.StoreMgr.get('ContactStore'),
 3     itemTpl       : '{lastName}, {firstName}',
 4     emptyText     : 'No contacts defined.',
 5     allowDeselect : false,
 6     onRender      : function() {
 7         MyApp.ContactList.superclass.onRender.apply(this, arguments);
 8         this.store.load();
 9     }
10 });
11 
12 Ext.reg('ContactList', MyApp.ContactList);

　　'ContactStore'为本地存储的Store。

onContactListItemTap、onContactListItemSwipe事件跳转到dispatchToCtcLstCtrlr函数。在此函数中对buildLeftDockList绑定了一个控制器'ContactListController'，用来控制buildLeftDockList对象的所有操作。

同样的，在buildBottomDockToolBar中的button都相应的绑定了控制器，相应其点击操作。

'New'和'Save'默认绑定了控制器'ContactFormPanelController'

'Delete'则是绑定了'ContactListController'。

两个控制器的代码分别如下：

 1 //ContactListControllers.js
 2 Ext.regController('ContactListController', {
 3     itemTap : function(dataObj) {
 4         var views       = dataObj.views,
 5             contactForm = views.contactForm,
 6             model       = dataObj.model;
 7 
 8         contactForm.loadRecord(model);
 9     },
10     deleteContact : function(dataObj) {
11         console.info('DeleteContact');
12         var model      = dataObj.model,
13             modelStore = model.store;
14 
15         if(! model)  {
16             return;
17         }
18 
19         var confirmText = 'Do you want to remove ' + model.get('firstName') + ' ' + model.get('lastName');
20 
21         Ext.Msg.confirm(
22             'Please confirm',
23             confirmText,
24             function(btn) {
25                 if (btn === 'yes') {
26                     var newDispObj = Ext.applyIf({
27                         controller : 'ContactFormPanelController',
28                         action     : 'newContact'
29                     }, dataObj);
30 
31                     Ext.dispatch(newDispObj);
32 
33                     modelStore.remove(model);
34                     modelStore.sync();
35                 }
36             }
37         );
38     }
39 });

posted on 2011-08-23 19:06 Jackey_Chen 阅读(3857) 评论(2) 编辑收藏举报