Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools


it:sencha_touch:start

Sencha Touch

  • 电脑上使用 chrome 调试时, 开 console
  • 注意大写!
  • Ext.fly 与 Ext.get 都用来获得某 dom 元素, 但机制不同:
    • 对获得后只引用一次、之后不再引用的元素, 应使用 Ext.fly (flyweight技术,该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存,下一次使用Ext.fly方法的元素节点将占据相同地址的内存, 省内存)
    • 对需要 多次引用的元素,应使用 Ext.get 方法,这样可以避免浏览器共享内存的频繁使用(避免一些意想不到的Bug),同时也可以让该元素使用Ext.dom.Element对象所享有的浏览器中的 缓存
  • sencha touch 各组件/主题的样式可使用 kitchen-sink 查看, 或者参考 2.3 release note (2.3.1 中 cupertino 还 ok)
  • 下载的 Sencha Touch 权威指南 有缺页, 未读的包括:
    • 4.1.4 滚动
    • 4.2.1 密码 passwordfield
    • 4.2.2 数值 numberfield

基础

毕竟 sencha touch 是一个前端框架,所以引入它的 css 和 js 库就能使用了:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
    <link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
 
    <script type="text/javascript">
        Ext.application({
            launch : function() {
                Ext.Msg.alert(
                    'Hello!',
                    'Hello there from Sencha Touch!'
                );
            }
        })
    </script>
</head>
    <body>
    </body>
</html>

但开发时需注意 sencha touch 的 js 库有几个版本, 开发时一般用 sencha-touch-all-debug.js:

动态加载模块包含所有模块 (all)
无调试信息用来发布 (通过 cmd 加入 require 的类)用来发布 (但包含所有类太大了, 一般不用)
有调试信息 (debug)开发时使用, 需 Ext.require('Ext.Panel');
指定动态加载的类, 但动态加载其实较慢, 开发时并不方便
开发时使用

布局 Layout

基础布局类型

  • hbox 所有子元素横向排列 [abc]
  • vbox 所有子元素纵向排列 [a/b/c]
  • fit 最后一个子元素自适应到父元素的尺寸, 之前的子元素存在, 但被遮住了看不到
  • card 默认只显示第一个子元素, 自适应到父元素的尺寸, 之后的子元素存在, 但被遮住了看不到.
    • 可以用 panel.setActiveItem(/* 序号或标签 id 或变量 */) 设置显示的元素 (但 2.3.1 id 不成功)
    • 可以设置 card 切换时的动画
      var panel = Ext.create('Ext.Panel', {
          id: 'homePanel',
          layout: {
              type: 'card',
              animation: {
                  type: 'slide',
                  direction: 'down',
              }
          },
          items[
              ...
          ]
      });
    • 还可使用 panel.animateActiveItem(item, animation) 来重载默认动画切换卡片 (但 2.3.1 animation 测试只支持 string, 不支持 object)

布局组件

  • Ext.TabPanel
    • panel.setActiveItem(1);
    • panel.animateActiveItem(0, 'cube');
  • Ext.Carousel 旋转木马 幻灯片
  • Ext.NavigationView 栈
    • view.push(panel);
    • view.pop();
    • view.reset();

组件的重要配置

  • docked: panel 中增加 items 时, item 可设置 docked 属性, 设置后可停靠在外部容器的 left, top, right, bottom
  • xtype: 在配置 items 时, 可使用 xtype 来便捷地设置 item 的类型, 取代 Ext.create().
    • 而 xtype 还有最大好处是可以使用组件的延迟渲染的特性。所谓延迟渲染特性,是指当程序运行到创建组件的代码时,并不真正创建组件,而是延迟到真正需要对这些组件进行渲染并将其显示在浏览器中时,才会将它们进行创建并将其装载到浏览器的内存中。这样可以大大提高应用程序的性能,尤其是当一个页面中使用了大量组件的时候。这样在页面打开时页面中没有被显示的组件将不会占用宝贵的内存资源。
    • getXtypes()
    • isXType()
    • var panel = Ext.create('Ext.Panel', {
          defaults:{
      	// items
              xtype:'carousel',
      	// items' items
              defaults:{
                  xtype:'panel'
              }
       
          },
          layout: {
              type : 'vbox',
              align: 'stretch'
          },
          items: [
              {
                  id:'carousel1',
                  direction: 'horizontal',
                  items: [
                      {
                          html: '左面板',
                          style: 'background-color:pink'
                      },
                      //...
                      ]
              },
              {
                  id:'carousel2',
                  direction: 'vertical',
                  items: [
      		{
                          html: '上面板',
                          style: 'background-color:pink'
      		},
                      //...
                      ]
              }]
      });

表单 Form

  • 表单面板
    • Ext.form.Panel
    • xtype = formpanel
  • 表单域
    • Ext.field.*
    • xtype = *field

Model, Store, Proxy, Reader

Proxy 代理的类型:

  • 客户端
    • LocalStorageProxy
    • SessionStorageProxy
    • MemoryProxy: 刷新后清空
  • 服务端
    • AjaxProxy: 同域
    • JsonPProxy: 异域

Reader 阅读器的类型:

  • ArrayReader
  • JsonReader
  • XmlReader
// 定义 Model
Ext.define('Job', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'id', type: 'int'},
            {name: 'title', type: 'string'},
            // 定义 field 也可以只用一个 name 如 'experience', 此时 type 为 'auto'
        ]
    }
});
 
// 定义 Store
var jobStore = Ext.create('Ext.data.Store', {
    model: 'Job',
    // 定义 Store 时, 可以不用已有的 model, 而用 "匿名 model" fields, 如下
    // fields: ['id', 'title']
    data: [
        {id: 1, title: '前端工程师'},
        {id: 2, title: '后端工程师'},
        {id: 3, title: '全端工程师'},
    ]
});
 
var remoteJobStore = Ext.create('Ext.data.Store', {
    model: 'Job',
    autoLoad: true,
    autoDestroy: true,
    proxy: {
        type: 'ajax',
        url: 'jobs.json',
        reader: {
            type: 'json'
        }
    }
});
 
var formPanel = Ext.create('Ext.form.Panel', {
    items: [
        {
            xtype: 'selectfield',
            label: '应聘职位',
            name: 'job',
 
            // 使用 data store
            store: jobStore,
            valueField: 'id',
            displayField: 'title'
 
        },
    ]
});

对象关系

→ require

view → store → model

it/sencha_touch/start.txt · Last modified: 2014/03/10 01:25 by admin