Sencha Touch App （MVC）开发小结

最新推荐文章于 2024-07-25 11:26:35 发布

alanhome2003

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量2.6k

点赞数

文章标签： mvc function action class tabs html

本文链接：https://blog.csdn.net/alanhome2003/article/details/7338892

版权

Private 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 带图片的按钮：

在button的配置项iconCls指定一个Css class,例如：

.arrow-icon{
background-image: ../images/arrow.png; background-repeat: norepeat; 
width: 97px !important; 
height: 48px; !important;
}

2. app.js 的结构：

Ext.application({
    name: 'MyApp',

    models: ['User', 'Group'],
    stores: ['Users'],
    controllers: ['Users'],
    views: ['Main', 'ShowUser'],

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});
The example above will load 6 files:
app/model/User.js
app/model/Group.js
app/store/Users.js
app/controller/Users.js
app/view/Main.js
app/view/ShowUser.js
如果views下面划分出其他子文件夹来更好管理整个视图：Ext.application({
    name: 'MyApp',

    controllers: ['Users', 'nested.MyController'],
    views: ['products.Show', 'products.Edit', 'user.Login']
});
In this case these 5 files will be loaded:
app/controller/Users.js
app/controller/nested/MyController.js
app/view/products/Show.js
app/view/products/Edit.js
app/view/user/Login.js


如果有共享的文件，就在app旁边建一个文件夹，然后设定一个path：
Ext.Loader.setPath({ 'Auth': 'Auth'});Ext.application({ views: ['Auth.view.LoginForm', 'Welcome'], controllers: ['Auth.controller.Sessions', 'Main'], models: ['Auth.model.User']});
This will load the following files:

Auth/view/LoginForm.js
Auth/controller/Sessions.js
Auth/model/User.js
app/view/Welcome.js
app/controller/Main.js
Ext.application用于ST2， 如果页面不包含Ext.app.Application, 自动调用 Ext.app.Application ，然后放入Ext.onReady,
 一旦页面准备就绪就实例化该类。
或者


Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            xtype: 'component',
            html: 'Hello world!'
        });
    }
});


或者


new Ext.Application({
    name: 'MyApp',
    launch: function() {
  
    }
});
new Ext.Application(Sencha Touch 1) 会自动创建对应的namespace：
//this code is run internally automatically when creating the app
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');


或者
 Ext.regApplication({
 	name: 'myapp',
 	defaultTarget: 'viewport',
 	defaultUrl: '',
 	
 	launch: function(){
 		this.viewport = new myapp.views.Viewport({
 			application: this,
 		})
 	}
 });
shorthand for new Ext.Application(Sencha Touch 1)

3. 创建动态Object：
Ext.create('Ext.Panel',{config...});
4. 获取HTML 元素的内容：
Ext.getCmp(‘idofCmp’).el.dom.childNodes[x].innerHTML
Ext.getCmp(‘idofCmp’).el.dom.firstChild.innerText
Ext.getDom(‘idofCmp’).childNodes[x].innerText
Ext.getDom(‘idofCmp’).firstChild.innerHTML
innerText 返回不带tag标志的内容



5. startup logic（Sencha Touch 2）:
在launch一个app之前如果需要做些初始化操作，有以下选择：

   
   Controller 中的init函数
Profile中的launch函数，但只有被激活的profile的launch函数会被调用
这个调用顺序如下：

   
   
Controller#init functions called（ST 1 也可以用init来初始化Controller）

Profile#launch function called

Application#launch function called

Controller#launch functions called

app中defaultUrl定义的方法会被调用，前提要先定义route.js


6. 在页面载入时出现一个Loading My App... 

首先在index.html 的body中写入：
<body>
      <div id="loading-mask" style="margin:auto;width:200px;padding-top:50px">Loading My App...</div>
</body>
然后在app.js配置项中设置：useLoadMask: true,
默认的id是“loading-mask”，也可以使用自定义的id(?)






7. 创建一个Object的方法(ST1)：
如果是 store，model，controller， 可以用regStore, regModel, regController, 如果有变量在其他地方指向该类时，需用storeMgr, modelMgr, controllerManager在定义时对其赋值。

Ext.regStore('NotesStore',{
...
});
NotesApp.stores.notesStore = Ext.StoreMgr.get('NotesStore');


如果是继承现有的类，则用 Ext.extend，namespace这里必须是NotesApp,NotesApp.stores/views/models/controllers:


NotesApp.views.NotesListView = Ext.extend(Ext.Panel,{...});同时可以添加一个string, 用于通过xtype来创建这个类：


App.views.HomeIndex = Ext.extend(Ext.Panel,{
    html: '<a href="#Home/about" class="menu-item">About</a>',//Calling a controller action using a HTML link <a href=”#route”>Some Route</a>
    styleHtmlContent: true,
    scroll: 'vertical',
    style: 'background: #d8e2ef',
});

Ext.reg('HomeIndex', App.views.HomeIndex);



如果创建一个现有类，用 new Ext.classname:

this.notesList = new Ext.List({...});


8. 通过modelMgr创建一个新记录：


var note = Ext.ModelMgr.create({id:noteId,date: now,title:'',narative: ''},'NoteModel');


第一个参数是该新记录的初始值，格式为 字段名：变量名/string

第二个参数是该记录类型(string)， 这里是NoteModel，与定义该model用到的名字一至





9. Ext.form.FormPanel 加载新创建的记录以及存储更改过的记录,删除记录：

NotesApp.views.noteEditorView.load(note);


这里的note即是Nr.8 中的 变量，这样在formpanel中对应的字段处显示相应的值：


items: [{
        xtype: 'textfield',
        name: 'title',
        label: 'Title',
        required: true
    }, {
        xtype: 'textareafield',
        name: 'narrative',
        label: 'Narrative'
    }]


这里的formpanel只有2个fields，分别是 name：'title' 和 name:  'narrative', 根据不同的name对号入座新纪录中的初始值。

如果要保存一个更改后的记录，那么先要获取该的记录：

var currentNote = NotesApp.views.noteEditorView.getRecord();


然后update当前该(更改后的)内容到对应的记录中：


NotesApp.views.noteEditorView.updateRecord(currentNote);


最后同步store与model的数据，给出新的排列依据(option)，刷新list：


NotesApp.stores.notesStore.sync();
NotesApp.stores.notesStore.sort([{property:'date',direction:'DESC'}]);
NotesApp.views.notesListView.refreshList();


如果要删除记录：


var currentNote = NotesApp.views.noteEditorView.getRecord();
	
if(NotesApp.stores.notesStore.findRecord('id',currentNote.data.id)){
	NotesApp.stores.notesStore.remove(currentNote);			
}
NotesApp.stores.notesStore.sync();
NotesApp.views.notesListView.refreshList();


store类的findRecord可以根据字段名来查找记录，步骤首先通过FormPanel 获取当前记录，然后取记录中的某个字段值来查找，如果找到就用Store.remove函数删除，最后同步记录和刷新list。




10. routes 的定义：

Ext.Router.draw(function(map) {
//map.connect("Home/index",  {controller: 'Home', action: 'index'});//worx too
//map.connect("Welcome",  {controller: 'Home', action: 'index'});// url: http://mydomain.com/#Welcome,并且调用home的index函数
map.connect(':controller/:action');
});

用于识别route， 比如：Ext.Router.recognize(tab.route);




11. popup窗口从下往上slide, 该窗口半透明：

this.searchView = this.render({
	xtype: 'SearchIndex',
});

this.searchView.show({
	type: 'slide',
	direction: 'up',
	duration: 500
});


SearchIndex定义如下：


App.views.SearchIndex = Ext.extend(Ext.Panel,{
	cls: 'search-panel',//make this view's background semi-transparent
	fullscreen: true,//it's not child of viewport
	floating: true,//have a slide animation
	floatingCls: '',//remove the class x-floating as default css class by floating,不然半透明效果无法实现
});
Ext.reg('SearchIndex', App.views.SearchIndex);


Css search-panel:


.search-panel {
    z-index: 10000;
    background: url(../images/search-panel-bg.png) repeat;
}


12. Ext.each 使用举例：


// iterate through all the items
Ext.each(this.items, function(item)
		{
// add a handler function for the tab button
	item.handler = function(){
		thisComponent.tabButtonHandler(this);//this refs tab button
	};
},this);


13. route变换所触发事件的处理：


Ext.Dispatcher.on('dispatch', function(interaction)
		{
			var tabs = this.query('.tab');	
			var action = interaction.action;
			var controller = interaction.controller.id;
			//console.log('id: ' + controller);// output 'Home'
			
			Ext.each(tabs, function(item)
			{
				if ( ! item.route)
					return;
				
				var dispatchOptions = Ext.Router.recognize(item.route);//if recognize, call the action
				//
				var itemAction = dispatchOptions.action;
				var itemController = dispatchOptions.controller;
				if (itemController == controller && itemAction == action)
				{
					this.setActiveTab(item);
					
					this.previousTabIndex = this.items.indexOf(item);
					
					return false;//stop loop
				}
			}, this);
			
		}, this);

alanhome2003

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Sencha Touch App （MVC）开发小结

1. 带图片的按钮：在button的配置项iconCls指定一个Css class,例如：.arrow-icon{background-image: ../images/arrow.png; background-repeat: norepeat; width: 97px !important; height: 48px; !important;}2. app.js 的结构
复制链接

扫一扫

专栏目录