Sencha学习入门

2015-12-31 本文已影响0人 Benjamin1

Sencha Touch 2.4简介

[TOC]

1.简介和安装

: Sencha Touch是一个基于HTML5的移动应用开发框架，支持Android,IOS，黑莓等平台,
可创造原生App般的体验。

1.1 安装

安装项目	功能
Sencha Cmd	核心功能
JRE 1.7	支持用java编写的Sencha Cmd
ruby	Sencha Touch用来编译CSS
Sencha Cmd	核心功能

所有资料位于 T:\BZU
第一个应用
部署于IIS

sencha -sdk \path\to\touch generate app MyApp \path\to\MyApp

sencha -sdk d:\touch-2.4.2 generate app MyApp d:\projects\myapp

?myapp????????????IIS?,????,???????debug??
(IIS????MIME?? application/x-json
??:http://stackoverflow.com/questions/332988/get-iis6-to-serve-json-files-inc-post-get/1121114#1121114)

??????????????
??????????? ?d:\projects\myapp
cmd?? sencha app build
??\build\production\myapp ?????????????

可以看到，一个sencha touch应用就是一个html,一个app.js，再加上处于app/model,app/view,app/controller目录下一堆model,view,controller文件的集合

1.1 参考文档

http://docs.sencha.com/touch/2.4/getting_started/getting_started.html
????:
Ext.application({
name:'Sencha',

launch: function() {

   var myPanel= Ext.create("Ext.tab.Panel", {
        tabBarPosition: 'bottom',
        id:'myPanel',
        style:'backgroundColor:yellow',
        html:'<h1>Hello World</h1>'});
      Ext.Viewport.add(myPanel);
      Ext.get('myPanel').addCls('myColor');
}

});

Sencha Touch类的使用
创建类:

Ext.define('Animal', {
    config: {
        name: null
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    speak: function() {
        alert('grunt');
    }
});

实例化:

var bob=Ext.create('Animal',{name:'Bob'});
bob.speak();

继承:

Ext.define('Human', {
    extend: 'Animal',
    updateName: function(newName, oldName) {
        alert('Name changed. New name is: ' + newName);
    }
});

静态成员:

  Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },
    config: {
        brand: null
    },
    constructor: function(config) {
        this.initConfig(config);

        // the 'self' property of an instance refers to its class
        this.self.instanceCount ++;
    }
});

xType
如果想直接用大括号{}来创建适用于容器内的组件，用xType比较方便。

Ext.application({
    name : 'Sencha',
    launch : function() {
        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    html: 'This panel is created by xtype'
                },
                {
                    xtype: 'toolbar',
                    title: 'So is the toolbar',
                    docked: 'top'
                }
            ]
        });
    }
});

删除组件：清理内存

mainPanel.destroy();

2.一个Sencha应用的五个部分

一个Sencha应用由五部分组成：Model,View,Controller,Store和Profile。

2.1 Controller

控制器响应或侦听程序的事件。

2.1.1 自动实例化

2.1.2 命名对应要处理的数据模型类

应用名为MyApp,模型类为Product---->在路径app/controller/Products下创建
MyApp.controller.Products类

2.1.3 controller执行顺序：

 a)controller的init方法
 b)Profile的launch方法
 c)Application的launch方法
 d)controller的launch方法（主要逻辑放在这）

2.1.4 demo

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            nav: '#mainNav'
        }
    },

    addLogoutButton: function() {
        this.getNav().add({
            text: 'Logout'
        });
    }
});

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {  //control中可混合使用refs的键和ComponentQuery选择器作为control的key
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {  
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        // called whenever the Login button is tapped
    },

    doLogout: function() {
        // called whenever any Button with action=logout is tapped
    }
});

control和refs的参数均为键值对
nav--->getNav()
值可以为用来查找组件的ComponentQuery选择器(在本例中为"#mainNav")。

2.1.5 路由

Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
config: {
routes: {
'login': 'showLogin',
'user/:id': 'showUserById'
},

    refs: {
        main: '#mainTabPanel'
    }
},

showLogin: function() {
    });
},

showUserById: function(id) {
}

});

指向路径，调用相应的函数
http://myapp.com/#login --->调用 showLogin
http://myapp.com/#user/123 --->调用 showUserById

2.1.6 Before过滤器

Ext.define('MyApp.controller.Products', {
    config: {
        before: {
            editProduct: ['authenticate', 'ensureLoaded']
        },
        routes: {
            'product/edit/:id': 'editProduct'
        }
    },

    editProduct: function() {
    },
    
    authenticate: function(action) {
        MyApp.authenticate({
            success: function() {
                action.resume();
            },
            failure: function() {
                Ext.Msg.alert('Not Logged In', "You can't do that, you're not logged in");
            }
        });
    },

    ensureLoaded: function(action) {
        Ext.require(['MyApp.custom.Class', 'MyApp.another.Class'], function() {
            action.resume();
        });
    }
});

2.2 View

简单例子

app.js中

Ext.create('Ext.Panel', {
    html:'Welcome to my app',
    fullscreen:true
});

复杂一点的例子

app/view/Image.js

Ext.define('app.view.Image',{
    extend:'Ext.Img',
    requires:['Ext.MessageBox'],
    config:{
        title:null,
        description:null
    },

    initialize:function(){
        this.callParent(arguments); //确保父类的初始化函数被执行
        this.element.on('tap',this.onTap,this);//绑定事件
    },
    onTap:function(){
        Ext.Msg.alert(this.getTitle(),this.getDescription());
    }
})

app.js

Ext.application({
    name : 'Sencha',
    launch : function(){
        Ext.create("app.view.Image",{
            title:'Orion Nebula',
            description:'THe xdasdasdadadada',
            src:'http://www.bz55.com/uploads/allimg/150309/139-150309101A8.jpg',
            fullscreen:true
        });
    }
});

define方法中的一些参数：
extend,xtype,requires,config

2.3 Model

2.3.1 创建模型

Ext.define('MyApp1.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' }
        ]
    }
});

2.3.2 关联关系

Ext.define('MyApp1.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'name'],
        proxy: {
            type: 'rest',
            url : 'data/users',
            reader: {
                type: 'json',
                root: 'users'
            }
        },
        hasMany: 'Post' // shorthand for { model: 'Post', name: 'posts' }
    }
});
Ext.define('Post', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'user_id', 'title', 'body'],
        proxy: {
            type: 'rest',
            url : 'data/posts',
            reader: {
                type: 'json',
                root: 'posts'
            }
        },
        belongsTo: 'User',
        hasMany: { model: 'Comment', name: 'comments' }
    }
});
Ext.define('Comment', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'post_id', 'name', 'message'],
        belongsTo: 'Post'
    }
});

2.3.3 校验

app/model/User.js

Ext.define('MyApp1.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields:['id', 'name', 'age', 'gender'],
        validations: [
            { type: 'presence',  field: 'name' },//必须存在
            > { type: 'length',    field: 'name', min: 5 },
            { type: 'format',    field: 'age', matcher: /\d+/ },//匹配正则表达式
            { type: 'inclusion', field: 'gender', list: ['male', 'female'] },//白名单
            { type: 'exclusion', field: 'name', list: ['admin'] } //黑名单
        ],
        proxy: {
            type: 'rest',
            url : 'data/users',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    }
});

app.js

Ext.application({
    name : 'MyApp1',
    launch : function(){
        var newUser = Ext.create('MyApp1.model.User', {
            name: 'admin',
            age: 'twenty-nine',
            gender: 'not a valid gender'
        });
        var errors = newUser.validate();
        console.log('Is User valid?', errors.isValid()); 
        console.log('All Errors:', errors.items); 
        console.log('Age Errors:', errors.getByField('age')); 
    }
});

2.3.4 proxy

proxy由store负责调用，用来为store加载和保存数据。
分为client和server两种

2.4 Store

2.5 Profile：配置

Ext.application({
  name: 'MyApp',  
  profiles: ['Phone', 'Tablet']，
  models: ['User', 'Product', 'nested.Order'],
  views: ['OrderList', 'OrderDetail', 'Main'],
  controllers: ['Orders'],
  launch: function() {
  Ext.create('MyApp.view.Main');
  }
});

模板：

类的使用

 Ext.define('My.sample.Person', {
            name: 'Unknown',

            constructor: function(name) {
                if (name) {
                    this.name = name;
                }
            },
            eat: function(foodType) {
                alert(this.name + " is eating: " + foodType);
            }
        });

        var aaron = Ext.create('My.sample.Person', 'Aaron');
        aaron.eat("Salad"); // alert("Aaron is eating: Salad");

require属性:

    Ext.define('Human', {
        extend: 'Animal',
        requires: 'Ext.MessageBox',
        speak: function() {
            Ext.Msg.alert(this.getName(),                         "Speaks...");
            }
        });

创建类会自动创建相应属性的get和set方法。

类的命名：
最好只包含字母，数字(除非如Md5这样的专有名称)、_，- 等都不建议使用。
类应该归属于package包：
MyCompany.data.CoolProxy 顶级命名空间和实际类名遵从骆驼命名法，其他一律小写。即使首字母缩略语也应当使用骆驼命名法
Ext.data.HTMLParser----->Ext.data.HtmlParser

类名应该能映射到文件的实际存放目录
Ext.form.action.Submit类应该存储在：/Ext/form/action/Submit.js

其他

组件

组件
与用户交互的类
容器

var panel = Ext.create('Ext.Panel', {
    html: 'This is my panel'
});
Ext.Viewport.add(panel);

最顶层的容器就是Viewport

布局

水平布局HBox
垂直布局VBox
卡片布局card

事件

添加事件的两种方式

没有组件实例时

Ext.application({
    name: 'Sencha',
    launch: function() {
        var myButton = Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'Click me',
            //第一种方式
            listeners: {
                tap: function() {
                    alert('First tap listener');
                }
            }
        });
       //第二种方式
        myButton.on('tap', function() {
            alert("Second tap listener");
        });
        myButton.un('tap', function() {
            alert("Second tap listener");
        });
    }
});