app.js 学习笔记

1. 用defaultUrl指定启动入口：

Ext.regApplication({
	name: 'App',
	defaultUrl: 'Home/index',
	launch: function(){
		this.viewport = new App.views.Viewport();//we can use this instance in Controller by this.application.viewport
		this.viewport.query('#searchBtn')[0].setHandler(function(){
			Ext.ControllerManager.get('Search').index();//directly use controller's action
		});
	},
});

Ext.Router.draw(function(map){
	//map.connect("Home/index",  {controller: 'Home', action: 'index'});//worx too
	map.connect(':controller/:action');
});

当启动应用是会首先打开这个defaultUrl,这里格式为:controller/:action, Home为controller的定义名，index为其函数名(使用这个设置时要定义一个route.js)。query通过css selector来获取组建(#searchBtn为button的itemId)这里是一个button，然后通过button的setHandler函数来调用controller的index函数。在这里定义的变量this.viewport可以在controller中this.application.viewport来调用，主要用于setActiveItem(view,animation)，但是如果用 new Ext.Application({...}) 创建的app， this.application.viewport无法在controller中识别, 这时候需要用“应用名.对应NS.变量名：

Namespace App.views:

App = new Ext.Application({
	name:'App',
	
	launch: function(){
		/*
		 * here: App = this
		 * App.views.viewport = new App.views.Viewport(); only this can be run in console of chrome
		 */
		this.views.viewport = new App.views.Viewport();
		//App.views.viewport = new this.views.Viewport();//worx too
		
		this.views.usersList = this.views.viewport.down('#usersList');
		this.views.usersForm = this.views.viewport.down('#usersForm');
	}
});

Ext.regController('Users',{
	//TODO this.application.views.viewport worx?
	index: function(){
		App.views.viewport.reveal('usersList');
	},
	
	newForm: function(){
		//App.views.viewport.reveal('usersForm');
		App.views.viewport.reveal('usersForm');
	}
});

或者 namespace “App”：

App = new Ext.Application({
	name:'App',
	
	launch: function(){
		/*
		 * here: App = this
		 * App.views.viewport = new App.views.Viewport(); only this can be run in console of chrome
		 */
		this.viewport = new App.views.Viewport();
		//App.viewport = new this.views.Viewport();//worx too
		
		this.views.usersList = this.viewport.down('#usersList');
		this.views.usersForm = this.viewport.down('#usersForm');
	}
});

Ext.regController('Users',{
	//TODO this.application.views.viewport worx?
	index: function(){
		App.viewport.reveal('usersList');
	},
	
	newForm: function(){
		//App.viewport.reveal('usersForm');
		App.viewport.reveal('usersForm');
	}
});