Extjs 角角落落整理（一）MVC模式

Extjs角角落落整理（一）MVC模式

Extjs的MVC结构

app

controller

model

store

util

view

app.js

index.html

app是整个项目的根目录

controller放置ext的控制器，处理业务

model放置一些模型，这个与下面的store是关联的（要在contoreller定义）

store放置grid等组件的store（要在contoreller定义）

util放置帮助文件，主要是一些公共方法抽取放到util里面（要在contoreller注明）

view放置视图组件比如window、grid、tree等（要在contoreller定义）

app.js开启动态加载

index.html项目首页

app.js代码示例

/**
 * 应用层
 * className:开启动态加载
 */


Ext.onReady(function(){
	Ext.QuickTips.init();//支持tips提示
	Ext.Loader.setConfig( {
		enabled : true
	});//意思是开启Ext.Loader Ext.Loader是动态加载的核心

	Ext.Loader.setPath('Ext.ux', extPath+'/Extjs4/examples/ux');

	Ext.require([
	    'Ext.selection.CellModel',
	    'Ext.grid.*',
	    'Ext.data.*',
	    'Ext.util.*',
	    'Ext.state.*',
	    'Ext.form.*',
	    'Ext.ux.CheckColumn'
	]);

	Ext.application({
		//命名空间
	    name: 'LP',
		//应用的根目录
		appFolder : extPath+'/app',
		autoCreateViewport : true,

		//声明所用到的控制层
	    controllers: [
			'LP.controller.LPController'
		//	'LP.controller.SearchController'
	    ],
		//当前页面加载完成执行的函数
	    launch: function() {
			  Ext.override(Ext.view.BoundList,{
                    onMaskBeforeShow: function(args){
                            var loadingHeight = this.loadingHeight;
                            this.getSelectionModel().deselectAll();
                            if(loadingHeight){
                                    this.setCalculatedSize(undefined, loadingHeight);
                            }
                            return this.isVisible();
                    }
            });
			 if(Ext.grid.RowEditor) {//按钮汉化问题 
				    Ext.apply(Ext.grid.RowEditor.prototype, {
				        saveBtnText: '保存',
				        cancelBtnText: '取消',
				        errorsText: '错误信息',
				        dirtyText: '已修改,你需要提交或取消变更'
				    });
				}  
   			}
	}); 
});

组件的命名规范

以view下面的组件为例（store、model、util类似）

现在写一个viewport，viewport是放在view下面的，同时命名要大写，结构：命名空间+文件夹+名字

Ext.define('LP.view.Viewport',{
    extend: 'Ext.Viewport',
    layout: 'border',//viewport 以fit布局
    alias:'widget.viewPort',//别名
    defaults:{
//		bodyStyle:'padding 2px' 
	},//样式
    requires : [
        'LP.view.North',//头部区域
        'LP.view.West',//左侧树
        'LP.view.Center',//中间展示区域
        'LP.view.East',//右侧区域
        'LP.view.South'//底部footer
    ],
    initComponent : function(){
        var me = this;
        Ext.apply(me, {
            
        	items: [
                    {
                  	  xtype: 'box',
                  	  id:"header-panel",
                        region: 'north',
                        html: '<h1> lindenpat</h1>',
                        height: 30
                    },
                    {
                 	   		xtype:'eastPanel'  
                 	   		,margins: '2 5 0 0',
                    },  
                    {
						   xtype:'westPanel' 
						   ,margins: '2 0 0 5',
					  },{
					    xtype:'centerPanel'
					    ,margins: '2 0 0 0',
					  },
					  {
					    xtype:'southPanel'
					    ,margins: '0 5 5 5',
					  }
              ]
        });
        me.callParent(arguments);
    }
});

comtroller写法，我们现在定义SearchController，放在controller下面

Ext.define('LP.controller.SearchController',{
	extend:'Ext.app.Controller',
	stores:[// 都是应该空间名称，不能应用的别名
			'LP.store.WestTreeStore', 
	       ],
			
		views:[
			  'LP.view.Viewport','LP.view.tree.WestTree', 
			  ],

		models:[
		         'LP.model.CenterGridModel' 
		        ],
		refs:[
		      {ref: 'viewPort',selector:'viewPort'},// viewPort内容
		      {ref: 'westPanel',selector:'westPanel'},// westPanel内容
		      {ref: 'westTree',selector:'westTree'},// westTree内容
		      {ref: 'eastPanel',selector:'eastPanel'},// eastPanel内容
		      {ref: 'centerPanel',selector:'centerPanel'},// centerPanel内容
		      {ref: 'centerFormPanel',selector:'centerFormPanel'},
		      {ref: 'button[id=FormButton1]',selector:'centerPanel > centerFormPanel > button[id=FormButton1]'},// 中间面板 
		 ],        
	GridUtil:Ext.create('LP.util.GridDoActionUtil'),
	init:function(){
		
		this.control({
			'button[id=logic-add1]':{// 逻辑库 添加
				click:function(btnObj){
			        if (typeof(Ext.getCmp('addLogicWindowId')) == 'undefined') {
						var win= Ext.create('LP.view.window.AddLogicWindow');
						win.show();
					}else{
						Ext.getCmp('addLogicWindowId').show();
					}
				} 
			} 
		});
	} 
});

comtroller声明了stores、views、models