Ext下解决无弹出窗口的设计解决办法

该思路起源于在页面设计的时候,个人对弹出窗口这类的交互设计非常厌恶.而ext是单页面应用.我也不想通过切换tab页的方式来进行整个功能页面操作.因此衍生了在同一个页面里进行功能的切换.

比如:一个功能页面里包含”新增”、”修改”、”查询列表”的功能. 当我触发”新增”时,大多我看到的设计是弹出一个新增窗口或者新添加一个tab页面等等方式.但个人还是不喜欢,因此想在这个功能页面里做些手脚。

思路如下:

1、 一般来讲这类的切换页面最直接暴力的方式是通过组件”移除”和”添加” 的方式来对同一个页面进行切换的。但这种频繁的remove、add的方式(并且是假移除这种方式)相对之后的解决方案还是消耗性能的。

2、 后来发现另一种’图巧’的方式,即通过布局的方式来解决这种情况.

因为ExtJS提供了一种”card”卡片式布局.这样便解决了无弹窗的方式.

3、 后来在做的过程中,发现如果同时加载很多页面的话,确实量大,为了加快其渲染.借鉴了多tab页面里延迟加载的想法.

Ext.define('Ext.ux.panel.CardPage',{

            extend:'Ext.panel.Panel',

            tabItems:[],

            border:false,

             getCurrentPanel:function(){//获取当前页对象

                            returnthis.tabItemMap[this.getLayout().getActiveItem().name].inited;

            },

            getComponetByName:function(name){

                            vartabItemMap = this.tabItemMap;

                            if(tabItemMap[name]){

                                     if(tabItemMap[name].inited){

                                               returntabItemMap[name].inited;

                                     }else{

                                               throw'名称为:'+name+'的tab页面shang未初始化！'

                                     }

                            }else{

                                     throw'名称为:'+name+'的tab页面不存在！';

                            }

            },//转向对应的面板

           swicthToByName:function(name,callBack,scope){

                      var tabItemMap = this.tabItemMap;

                      if(tabItemMap[name]){

                                     if(tabItemMap[name].inited){

                                     }else{

                                               varcom = tabItemMap[name].createCom();

                                               if(callBack)callBack.call(scope||this,com,tabItemMap[name].inited);

                                               tabItemMap[name].inited= com;

                                               this.getLayout().getActiveItem().add(com);

                                     }

                                     this.getLayout().setActiveItem(tabItemMap[name].inited);

                            }else{

                                     throw'名称为:'+name+'的card页面不存在！';

                            }

            },

            initComponent:function(){

                            varme = this,tabItems = this.tabItems,items = [],tabItemMap = this.tabItemMap ={},obj = null,num = 0,name = null;

                            for(vari=0,len = tabItems.length;i<len;i++){

                                     obj= {

                                               xtype:’container’,

name: tabItems[i]['name'],

                                               layout:'fit',

                                               border:false

                                     };

                                     if(tabItems[i]['init']==true){

                                               num= i;

                                               name= tabItems[i]['name'];

                                     }

                                     tabItemMap[tabItems[i]['name']]= tabItems[i];

                                     items.push(obj);

                            }

                            if(name==null){//此时num为默认的 0

                                     name= tabItems[0]['name'];

                            }

                            this.layout= 'card';//强制card布局

                            this.items= items;

                            this.callParent(arguments); 

                            this.on({

                                     scope:this,

                                     beforerender:function(panel){//beforerender

                                               this.getLayout().setActiveItem(num);

                                               varcom = tabItemMap[name].createCom();

                                               tabItemMap[name].inited= com;

                                               this.getLayout().getActiveItem().add(com);

                                     }

                            });

            }

  });

也是没有优化代码。思路与多tab页延迟切换是大致一致的,后话就不提了.有兴趣的自己研究代码,不提供样例了。

--请尊重原创！如有转载请标注转载地址！ 
--改文的资源同步上传到我的资源中,供免费下载