文档章节

Sencha Touch开发一些需要注意的地方

crazymus
 crazymus
发布于 2015/02/12 14:58
字数 1496
阅读 5831
收藏 4

Sencha Touch开发一些需要注意的问题

如今Sencha Touch已经升级到2.4了,功能更加强大,性能也有所提升。
但由于一些功能的改进,文档并没有及时更新,导致开发时会遇到一些困难。
结合我使用的经验总结一些需要注意的地方,希望能帮助大家。

-------------------
Sencha Touch的开发流程

下载SDK,安装Sencha Cmd。

创建项目:

sencha generate app MyApp ../test
打包项目(压缩,便于部署)
sencha app build
由cmd生成的项目会自动加载类库文件,文件太多,导致等待时间过长,
可以直接引入resources/css/sencha.css和sencha_touch_all.js来提高速度,
但打包时需要还原,否则会出错

根目录下的app.js是程序的入口文件,代码如下所示:
Ext.application({
    name: 'MyApp', //The name is used to create a single global namespace for your entire app

    requires: [
        'Ext.MessageBox',
        'Ext.navigation.View',
        'Ext.dataview.List',
        'Ext.plugin.PullRefresh',
        'Ext.plugin.ListPaging'
    ],

    controllers:[
        'Main'
    ],

    views: [
        'Main',
        'ArticleList'
    ],

    models:[
        'MyApp.model.Article'
    ],

    stores:[
        'MyApp.store.Articles'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

用到的组件都需要在requires中引入,否则JS调试器中会有警告,
Sencha Touch采用MVC结构,所有controller、model、store、view文件需要在这里引入.
实际文件存放在app文件夹下的相应目录
-------------------------------------
自定义组件除了extend属性,其他属性需要写在config下:
Ext.define("MyApp.model.Article", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            {name: "title", type: "string"},
            {name: "content",  type: "string"},
            {name: "add_time", type: "string"}
        ]
    }
});

Ext.define('MyApp.store.Articles',{
    extend:'Ext.data.Store',
    config:{
        model: "MyApp.model.Article",
        proxy: {
            type: "ajax",
            url : listUrl,
            reader: {
                type: "json",
                rootProperty: "root"
            }
        },
        autoLoad: true,
        pageSize:10,
        listeners:{
            'beforeload':function(store){
                //console.log('start');
                if(store.getAllCount()==0){
                    showMask();
                }
            },
            'load':function(){
                hideMask();
            }
        }
    }
});
----------------------------------
card布局可以配置页面的切换动画
Ext.create('Ext.Panel',{
layout:{
    type:'card',
    animation:'fade'
},
items:[
    {
    .....
    },
    {
    .....
    }
 ]
});

----------------------------------

Ext.dom.Element,同Ext.Element,是Sencha Touch封装的dom对象,
是对普通dom的进一步封装,给dom对象添加了一些新方法
// 根据id获取元素,返回Ext.Element类型
var el = Ext.get("my-div");
// 根据HTMLElement获取元素,返回Ext.Element类型
var el = Ext.get(myDivElement);

//HTMLElement是普通的dom对象

//Ext.Element 获取所有img 返回数组(HTMLElement)
el.query('img');

//Ext.Element 获取第一个img 返回单个对象(HTMLElement)
el.down('img',true);

//返回单个对象(Ext.dom.Element)
el.down('img');

//Ext.dom.Element修改样式
el.applyStyles({
    color:'red'
});

//普通HTMLElement修改样式
el.style.width = '100%';

-----------------------------------
//创建loading
Ext.Viewport.setMasked({
    xtype:'loadmask',
    message:'请稍后...'
});

//关闭loading 为什么不是unMask?很奇怪
Ext.Viewport.unmask();

//也可以使用
Ext.Viewport.setMasked(false);
-----------------------------------
文档中方法带绿色右箭头表示CHAINABLE,支持类似jQuery的链式语法
------------------------
painted事件
Fires whenever this Element actually becomes visible (painted) on the screen
该事件发生在dom加载完成时
----------------------------------
在使用布局时,一定要注意,如果父元素不配置layout属性(默认将为auto布局)
子元素一定要有高度,否则可能不会显示出来,即高度为0

card布局示例:
var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.setActiveItem(1);

每种布局方式都支持docked(停靠)属性:
灵活使用docked属性,可以很方便创建复杂的布局
Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top', //可以是top bottom right left
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

pack和align是布局的两个辅助定义项,pack代表了当前布局维度的特性,align则相反
例如对hbox布局,pack的定义表示水平方向的特性,而align表示垂直方向的特性:

layout: {
    type: 'hbox',
    align: 'start', //垂直方向停靠起始位置
    pack: 'start' //水平方向停靠起始方向,效果等同左对齐
},

align和pack可能的值:
start   
center 居中对齐
end
justify 两端对齐(自适应父元素的宽度或高度)

可以理解为word排版中的四种对齐方式:
左对齐
右对齐
居中对齐
两端对齐 

获取容器的布局
var layout = container.getLayout();
-----------------------------------------

对于滚动属性的说明。
每个容器都可以通过配置scrollable:true来实现滚动,
但要注意,对于子元素有滚动的,父元素不能有滚动,否则可能会出现滚动条冲突的问题

-----------------------------

使用控制器可以是代码变得干净和可读性强,下面的例子展示了controller的使用:

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

    config: {
        refs: {
            loginForm: 'formpanel' //组件查询 使用xtype 
        },
        control: {
            'formpanel button': { //也可以使用类似于css选择器的查询方式
                tap: 'doLogin' //该方法在下面定义
            }
        }
    },

    doLogin: function() {
        var form   = this.getLoginForm(), //根据refs中的loginForm自动生成getLoginForm方法

            values = form.getValues();

        MyApp.authenticate(values);
    }
});

-----------------------------------

组件查询(ComponentQuery),使用组件查询可以像CSS选择器一样
获取应用中的组件,下面通过一些例子来展示这一强大功能。
//获取指定属性的panel
Ext.ComponentQuery.query('panel[cls=my-cls]')

//模糊查询
Ext.ComponentQuery.query('panel[cls~=my-cls]')
//匹配结果
Ext.create('My.Panel', {
    cls : 'foo-cls my-cls bar-cls'
});

//根据id查询
Ext.ComponentQuery.query('#myCt panel');

//查询孩子节点
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

//查询多个组件
Ext.ComponentQuery.query('gridpanel, treepanel');

//获取禁用的元素
var disabledFields = myFormPanel.query("{isDisabled()}");

//值得注意的是,类似于isDisabled这样的方法还有一些,只要是返回布尔类型的,都可以作为
//查询参数,另外,query方法不只是可以用于Ext.ComponentQuery,对于每个容器组件都可以使用,上面的
//查询将会在myFormPanel的子元素中进行,而Ext.ComponentQuery.query的查询范围是全局
--------------------------------

//利用profile可以为不同的设备创建不同的界面,而共享相同的model和store
//现阶段我们不需要实现这样的功能,所以不做研究

//一些组件的初始化方法的执行顺序:
Controller#init functions called
Profile#launch function called
Application#launch function called
Controller#launch functions called
//可以利用该顺序来合理执行一些初始化逻辑

© 著作权归作者所有

crazymus

crazymus

粉丝 71
博文 80
码字总数 111033
作品 8
武汉
后端工程师
私信 提问
sencha touch开发经验总结

经过开发官网sencha touch项目,总结了一些经验。在开发过程中也遇到很多问题,这一路走过来真不容易,因为网上也找不到解决办法,只有自己去摸索了。看来sencha-touch目前的国内的使用者并不...

crazymus
2012/12/05
926
0
用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5、CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发。下载和建立 Sencha Touch,通过一个...

IBMdW
2012/03/19
1K
0
Sencha Touch 和 jQuery Mobile 的比较

很多人问我Sencha Touch (百度百科Sencha Touch译者加) 和jQuery Mobile哪个更好。事实上,它两的区别就像是Web后台编程,PHP和Java。它们都能完成同样的功能,但其实它们是为不同的目的而创...

oschina
2013/07/28
26.7K
24
使用 Sencha Touch 开发超炫的跨平台移动 Web 应用

Sencha Touch 是由 Sencha 公司开发的移动 Web 应用开发框架,用以提升主流移动设备在浏览器上的触碰操作,增强用户体验。该框架以久负盛名的 Ext JS 富客户端框架为基础,并支持最新的 HTML...

IBMdW
2011/08/04
4K
0
cordova3+sencha touch2.x 环境搭建

1.安装 nodejs 2.安装 cordova: npm install -g cordova 3.创建一个工程: cordova create MyApp com.example.MyApp MyApp 其中:第一个 MyApp是文件夹的名称; com.example.MyApp 是app i......

kisshua
2014/03/05
986
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
8
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
6
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部