sencha touch 自定义cardpanel控件模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃仅参考）

最新版本我将会放在：http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面，这里不会再做更新

代码：

  1 /*
  2 *模仿且改进NavigationView
  3 *返回时自动销毁视图，节约内存
  4 */
  5 Ext.define('ux.CardPanel', {
  6     extend: 'Ext.Container',
  7     xtype: 'cardPanel',
  8     requires: ['Ext.TitleBar'],
  9     config: {
 10         //顶部导航条
 11         navBar: {
 12             docked: 'top'
 13         },
 14         //布局，type不可更改
 15         layout: {
 16             type: 'card',
 17             animation: {
 18                 duration: 300,
 19                 easing: 'ease-out',
 20                 type: 'slide',
 21                 direction: 'left'
 22             }
 23         },
 24         //顶部控件组，在子项中配置
 25         navBarItems: null,
 26         //返回按钮
 27         backBtn: {
 28             align: 'left',
 29             ui: 'back'
 30         },
 31         //返回按钮显示状态，在子项中配置
 32         backHide: false,
 33         //临时cls，在子项中配置
 34         pCls: null,
 35         //底部导航栏、可选格式btmBar:'xtype'，在子项中配置
 36         btmBar: null,
 37         //当子项被激活后移除除了指定项之外的项，在子项中配置
 38         nRemove: null
 39     },
 40     //初始化
 41     initialize: function () {
 42         var layout = this.getLayout();
 43         if (layout && !layout.isCard) {
 44             Ext.Logger.error('CardPanel中layout的布局只能是card布局');
 45         }
 46         this.initStatus();
 47     },
 48     //初始化历史记录
 49     initStatus: function () {
 50         if (!this.viewStack) {
 51             //历史记录
 52             this.viewStack = [];
 53             //视图加载状态
 54             this.viewStatus = {};
 55         }
 56     },
 57     //更新返回按钮显示状态
 58     updateBackHide: function (newItem, oldItem) {
 59         var backBtn = this.getBackBtn();
 60         if (newItem) {
 61             backBtn.hide();
 62         } else {
 63             backBtn.show();
 64         }
 65     },
 66     //更新底部导航栏
 67     updateBtmBar: function (newItem, oldItem) {
 68         if (oldItem) {
 69             oldItem = this.down(oldItem);
 70             this.remove(oldItem);
 71         }
 72         if (newItem) {
 73             newItem = Ext.create(newItem);
 74             this.add(newItem);
 75         }
 76     },
 77     //创建导航栏控件组
 78     applyNavBarItems: function (newItems) {
 79         if (!newItems) return false;
 80         var me = this,
 81         navItems = [],
 82         i,
 83         ln;
 84         newItems = Ext.Array.from(newItems);
 85         for (i = 0, ln = newItems.length; i < ln; i++) {
 86             navItems.push(me.factoryItem(newItems[i]));
 87         }
 88         return navItems;
 89     },
 90     //更新导航栏控件组
 91     updateNavBarItems: function (newItem, oldItem) {
 92         var navBar = this.getNavBar();
 93         if (oldItem) {
 94             var i, ln;
 95             for (i = 0, ln = oldItem.length; i < ln; i++) {
 96                 navBar.remove(oldItem[i]);
 97             }
 98         }
 99         if (newItem) {
100             navBar.add(newItem);
101         }
102     },
103     //创建顶部导航栏
104     applyNavBar: function (config) {
105         return Ext.factory(config, Ext.TitleBar, this.getNavBar());
106     },
107     //更新顶部导航栏
108     updateNavBar: function (newItem, oldItem) {
109         if (oldItem) {
110             this.remove(oldItem);
111         }
112         if (newItem) {
113             this.add(newItem);
114         }
115     },
116     //更新临时cls
117     updatePCls: function (newItem, oldItem) {
118         if (oldItem) {
119             this.removeCls(oldItem);
120         }
121         if (newItem) {
122             this.addCls(newItem);
123         }
124     },
125     //创建返回按钮
126     applyBackBtn: function (config) {
127         return Ext.factory(config, Ext.Button, this.getBackBtn());
128     },
129     //更新返回按钮
130     updateBackBtn: function (newItem, oldItem) {
131         if (oldItem) {
132             this.getNavBar().remove(oldItem);
133         }
134         if (newItem) {
135             this.getNavBar().add(newItem);
136             newItem.on({
137                 scope: this,
138                 tap: this.onBackButtonTap
139             });
140         }
141     },
142     //更新移除
143     updateNRemove: function (newItem, oldItem) {
144         var animation = this.getLayout().getAnimation();
145         if (oldItem) {
146             //移除动画结束监听
147             animation.un({
148                 scope: this,
149                 animationend: 'onAnimationend'
150             });
151         }
152         if (newItem) {
153             //添加动画结束监听
154             animation.on({
155                 scope: this,
156                 animationend: 'onAnimationend'
157             });
158         }
159     },
160     /**
161     * 移除历史记录
162     * @private
163     */
164     viewStackPop: function (count) {
165         for (var i = 0; i < count; i++) {
166             this.viewStack.pop();
167         }
168     },
169     //添加视图
170     //注意xtype是指alternateClassName
171     push: function (xtype, params) {
172         var me = this,
173         view = this.getActiveItem(),
174         oldXtype = view && (view.config.xtype || view.getItemId());
175         /*过滤已经添加的视图*/
176         if (!this.viewStatus[xtype]) {
177             params = params || {};
178             params.itemId = xtype;
179             view = Ext.create(xtype, params);
180             this.add(view);
181         } else if (oldXtype != xtype) {
182             this.viewStack.push(xtype);
183             this.setActiveItem(xtype);
184         }
185     },
186     //当动画效果结束时,子项配置了nRemove属性将会激活
187     onAnimationend: function () {
188         //        console.log('animationend');
189         this.popAll(this.getNRemove());
190     },
191     //项被激活
192     onActivate: function (view) {
193         var config = view.config;
194         //        console.log('activate', config.xtype || view.getItemId());
195         //更新后退按钮
196         //        console.log('setBackHide', this.viewStack);
197         this.setBackHide(config.backHide || this.viewStack.length == 1);
198         //更新按钮组
199         var items = config.navBarItems || false;
200         this.setNavBarItems(items);
201         //更新cls
202         var pCls = config.pCls || false;
203         this.setPCls(pCls);
204         //更新标题
205         var title = config.title || '';
206         this.getNavBar().setTitle(title);
207         //更新底部导航栏
208         var btmBar = config.btmBar || false;
209         this.setBtmBar(btmBar);
210         //更新移除
211         var nRemove = config.nRemove || false;
212         this.setNRemove(nRemove);
213     },
214     //项被销毁
215     onDestroy: function (view) {
216         //        console.log('onDestroy', view.config.xtype || view.getItemId());
217         this.viewStatus[view.config.xtype || view.getItemId()] = false;
218     },
219     /**
220     * 不填写参数时，移除当前项，返回到上一项
221     * 如果参数是数字，则从最后一项开始移除指定数目的项
222     * 如果参数是string,则移除指定类型的项
223     * 如果参数是项，则移除传入的项
224     * 不论参数如何，都会保留一个活动项
225     * @return {Ext.Component} 当前活动项
226     */
227     pop: function (count) {
228         if (this.beforePop(count)) {
229             return this.doPop();
230         }
231     },
232     /**
233     * @private
234     *删除指定项
235     */
236     beforePop: function (count) {
237         var me = this,
238         innerItems = me.getInnerItems();
239         if (Ext.isString(count) || Ext.isObject(count)) {
240             var last = innerItems.length - 1,
241             i;
242             for (i = last; i >= 0; i--) {
243                 if ((Ext.isString(count) && Ext.ComponentQuery.is(innerItems[i], count)) || (Ext.isObject(count) && count == innerItems[i])) {
244                     //获得移除项序号
245                     count = last - i;
246                     break;
247                 }
248             }
249             if (!Ext.isNumber(count)) {
250                 return false;
251             }
252         }
253         var ln = innerItems.length,
254         toRemove;
255         //默认移除一项
256         if (!Ext.isNumber(count) || count < 1) {
257             count = 1;
258         }
259         //当我们试图移除更多视图时
260         count = Math.min(count, ln - 1);
261         if (count) {
262             this.viewStackPop(count);
263             //开始移除视图
264             toRemove = innerItems.splice(-count, count - 1);
265             for (i = 0; i < toRemove.length; i++) {
266                 this.remove(toRemove[i]);
267             }
268             return true;
269         }
270         return false;
271     },
272     /**
273     * @private
274     *移除最后一项
275     */
276     doPop: function () {
277         var me = this,
278         innerItems = this.getInnerItems(),
279         ord = innerItems[innerItems.length - 1];
280         me.remove(ord);
281         //触发被移除项的事件
282         return this.getActiveItem();
283     },
284     doResetActiveItem: function (innerIndex) {
285         var me = this,
286         innerItems = me.getInnerItems(),
287         animation = me.getLayout().getAnimation();
288         if (innerIndex > 0) {
289             if (animation && animation.isAnimation) {
290                 animation.setReverse(true);
291             }
292             me.setActiveItem(innerIndex - 1);
293         }
294     },
295     /**
296     * @private 
297     *执行移除项，调用remove方法后自动执行
298     */
299     doRemove: function () {
300         var animation = this.getLayout().getAnimation();
301         if (animation && animation.isAnimation) {
302             animation.setReverse(false);
303         }
304         this.callParent(arguments);
305     },
306     /**
307     * @private 
308     *执行添加项，调用add方法后自动执行
309     */
310     onItemAdd: function (item, index) {
311         if (item.isInnerItem()) {
312             var xtype = item.config.xtype || item.getItemId();
313             //如果配置了items,会先于initialize执行，所以需要初始化历史纪录
314             this.initStatus();
315             this.viewStatus[xtype] = true;
316             this.viewStack.push(xtype);
317             //添加监听
318             item.on({
319                 scope: this,
320                 activate: 'onActivate',
321                 destroy: 'onDestroy'
322             });
323         }
324         this.doItemLayoutAdd(item, index);
325         if (!this.isItemsInitializing && item.isInnerItem()) {
326             this.setActiveItem(item);
327         }
328         if (this.initialized) {
329             this.fireEvent('add', this, item, index);
330         }
331     },
332     /**
333     * 移除第一项和最后项之间的所有项（包括最后项）
334     * @return {Ext.Component} 当前活动视图
335     */
336     reset: function (noUp) {
337         return this.pop(this.getInnerItems().length);
338     },
339     //除了指定项,从倒数第二项开始移除
340     popAll: function (xtype) {
341         var me = this,
342         innerItems = this.getInnerItems(),
343         length = innerItems.length - 1,
344         oldXtype,
345         ord,
346         i;
347         this.viewStack = [xtype];
348         for (i = length; i > -1; i--) {
349             /*过滤掉需要显示的视图*/
350             ord = innerItems[i];
351             oldXtype = ord.config.xtype || ord.getItemId();
352             if (i == length) {
353                 me.viewStack.push(oldXtype);
354             } else if (oldXtype != xtype) {
355                 me.remove(ord, true);
356             }
357         }
358     },
359     //返回上一个历史记录
360     onBackButtonTap: function () {
361         this.pop();
362         this.fireEvent('back', this);
363     }
364 });

主视图js：

 1 /*
 2 *主视图,负责视图切换
 3 */
 4 Ext.define('app.view.Main', {
 5     extend: 'ux.CardPanel',
 6     requires: ['app.view.Home', 'Ext.picker.Picker', 'app.view.uitl.MyBar', 'app.view.user.Site'],
 7     xtype: 'main',
 8     config: {
 9         id: 'main',
10         cls: 'cardPanel',
11         backBtn: {
12             iconCls: 'reply',
13             iconMask: true,
14             cls: 'replyBtn'
15         },
16         //items只能配置一项
17         items: [{
18             xtype: 'home'
19         }]
20     }
21 });

子视图js：

 1 Ext.define('app.view.message.List', {
 2     alternateClassName: 'messageList',
 3     extend: 'Ext.List',
 4     xtype: 'messageList',
 5     requires: ['Ext.plugin.ListPaging'],
 6     config: {
 7         cls: 'list',
 8         //标题
 9         title: '校园资讯',
10         //用于控制navBarItems中的css
11         pCls: '',
12         //底部导航栏，直接填写alternateClassName
13         btmBar: 'myBar',
16         //额外的按钮组，只能是按钮组。不能添加其他属性
17         navBarItems: [{
18             itemId: 'mBtn',
19             xtype: 'button',
20             align: 'right',
21             iconMask: true,
22             cls: 'nBg',
23             iconCls: 'search',
24             action: 'show',
25             show: 'messageSearch'
26         }],
27         plugins: [{
28             xclass: 'Ext.plugin.ListPaging'
29         }],
30         itemTpl: '<div class="title">{Title}</div><div class="sm">时间 {Time}&nbsp;&nbsp;&nbsp;&nbsp;发布来源：{Auth}</div><div class="like"><div class="ico comment">0</div></div>',
31         store: 'messageList'
32     }
33 });

2013.9.6

更改CardPanel

优化navBarItems结构，itemId不再必须设置

优化for循环结果

修复popAll方法中ord为全局变量的问题

2013.9.6

更改push方法，可以在传入配置参数（只在第一次创建视图时有效）

2013.10.7

优化代码细节

2013.10.10

更改pop方法，将代码this.setActiveItem(this.getLateViewStack());移动到onBackButtonTap方法中，以解决pop后再push无动画效果的问题

2013.10.18

参照NavigationView大幅度修改代码，去除一些无用代码

2013.10.22

更新push方法，更好的配置自定义参数

移除debug标签，解决cmd压缩后出错的问题。感谢@低碳哥指出

2013.10.23

优化代码，移除了除了back之外的所有自定义事件。如需使用可以考虑用 activate与deactivate事件代替

sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃 仅参考）

sencha touch 自定义cardpanel控件模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃仅参考）