您的位置：首页 > 移动开发

Sencha Touch App （MVC）开发小结

2012-03-11 07:29 351 查看

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.Rou
a4ea
ter.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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： mvc function action class tabs html

相关文章推荐

新的分享

章节导航