`

HTML 5移动web开发指南中sencha touch笔记

阅读更多
《HTML 5移动web开发指南》,是UC公司著名前端开发师唐俊开(网名:三桥)
的新书,介绍了jquery mobile,sencha touch,phonegap的开发,内容很丰富,
最后还有一个小的实例,推荐阅读,给分85分,下面是其中sencha touch的
一些本人新学到的知识点小结
1  sencha touch中如果为某控件同时指定了cls样式和componentCls样式的话,
则componentCls样式会覆盖cls样式,如果还加了baseCls样式,则原来的样式会被命名
为比如panel_baseCls和pannel_baseCls登新的样式名称


2 UI 按钮
   <script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          // this will contain a vertical layout of buttons
          {
            xtype: "panel",
            layout: "vbox",
            items: [
              {
                xtype: "button",
                ui: "normal",
                text: "Normal" 
              },
              {
                xtype: "button",
                ui: "back",
                text: "Back" 
              },
              {
                xtype: "button",
                ui: "round",
                text: "Round" 
              },
              {
                xtype: "button",
                ui: "action",
                text: "Action" 
              },
              {
                xtype: "button",
                ui: "forward",
                text: "Forward" 
              }
            ] 
          }
        ]
      });
    }
  });
</script>

   按钮根据 ui 配置选项进行样式化。支持的按钮类型是 normal、back、round、action 和 forward。


3 为sencha touch设置自定义图标,见
http://wenku.baidu.com/view/47bc9087e53a580216fcfead.html

  实际上ui,iconmark,iconcls三个组件属性来实现,其实是base64编码而已,体积大了

4  按钮分组SegmentedButton.toggle,多个按钮中只有一个能按,比如
      xtype: 'toolbar',
                        docked: 'top',
                        items: [{
                            xtype: 'segmentedbutton',
                            items: [{
                                text: 'left',
                                pressed: true
                            }, {
                                text: 'center'
                            }, {
                                text: 'right'
                            }, {
                                text: 'justify'
                            }], // items
                            listeners: {
                                toggle: function (segBtn, btn, isPressed) {
                                    Ext.Msg.alert('Ext.SegmentedButton toggle:',
                                        btn.config.text + ' (pressed:' + isPressed + ')');
                                } // toggle


5 Carousels,翻译过来“传送带”的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带“移动”。移动设备上的屏

幕就是当前显示的内容。在中间的那个“一点点”图案即为指示器,指示器可以告诉你剩余有多种张待现实的页面。

   Ext.create('Ext.Carousel', {
    fullscreen: true,

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
});

6 ext.util.geolocation用法:

getCurrentPosition:function(){ 
    var geo = new Ext.util.GeoLocation({ 
        autoUpdate: true, 
        listeners: { 
            locationupdate: function (geo) { 
                Ext.getCmp('latitude') 
                    .setValue(geo.coords.latitude); 
                Ext.getCmp('longitude') 
                    .setValue(geo.coords.longitude); 
            }, 
            locationerror:function(geo, 
                                bTimeout, 
                              bPermissionDenied, 
                              bLocationUnavailable, 
                              message){ 
            } 
        } 
    }); 
    geo.updateLocation(); 

  
  
7 自定义命名空间后,则可以直接使用调用实例变量了
   比如MyApp.panelDemo=new Ext.Pannel({    });

8 sencha touch mvc中的model:
   
      MyApp.models.User=Ext.regModel( ..........)


然后定义store,比如:


app.stores.noteStore = new Ext.data.Store({
model:'note',
id:'noteStore'
});


app.models.note = Ext.regModel("note",{
fields:[
{name:'id',type:'int'},
{name:'title',type:'string'},
        {name:'content',type:'string'},
        {name:'position',type:'string'},
        {name:'latitude',type:'string'},
        {name:'longitude',type:'string'}
],
    /* 使用localStorage代理 */
proxy : {
type:'localstorage',
        id:'noteStorage'
}
});




一对多关系
     Ext.regModel('User',[fields:['id'],hasMany:['Post']});
    belongsTo:........

9 setactiveitem方法,能在不同的子组件中隐藏和切换,比如
    Ext.getCmp('pannel1').hide();
    Ext.getCmp('pannel2').show();
  等价于
   Ext.getCmp('pannel1').setActviteItem('pannel2');

10 MVC中的控制类注册
    MyApp.controllers.demoAction=Ext.regController('demoAction',{ showpannel:function()
                                                                       {

                                                                    });
                                                           }
                                       });
        调用时MyApp.controllers.demoAction.showpannel();


11 一个保存数据到sencha touch localstorage例子
    saveNote:function(){
        var form = Ext.getCmp("noteForm");
        var store = app.stores.noteStore;

        var last = store.last();
        var maxId = last==undefined?1:last.data.id+1;
        form.submit({
            waitMsg:'处理中...',
            success:function(){
                app.controllers.appController.showListPanel();
            }
        });
        var m = Ext.ModelMgr.create({id:maxId},'note');
        form.updateRecord(m,false);
        app.stores.noteStore.insert(maxId,m);
        app.stores.noteStore.sync();
        form.reset();
        app.controllers.appController.showListPanel();
    },

删除记录:
     removeAllNote:function(){
        Ext.Msg.confirm("确认", "你确认要清除本地所有数据?", function(){
            var count = app.stores.noteStore.getCount();
            for(var i=0;i<count;i++){
                app.stores.noteStore.removeAt(0);
            }
            app.stores.noteStore.sync();
            app.views.moreActionSheet.hide();
        });
    },



2
12
分享到:
评论

相关推荐

    HTML5移动Web开发指南(完整版)

    本书主要围绕HTML5技术,讲述如何利用HTML5相关技术开发移动Web网站和WebApp应用程序。本书共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;第二部分主要介绍HTML5的新功能和新...

    使用SenchaTouch开发跨平台移动Web应用.doc

    使用 Sencha Touch 开发跨平台移动 Web 应用 Sencha Touch 是一款移动 Web 应用开发框架,由 Sencha 公司开发,旨在提升主流移动设备在浏览器上的触控操作,增强用户体验。该框架以久负盛名的 Ext JS 富客户端框架...

    HTML5移动Web开发指南

    1. 第一部分:Web技术的发展及HTML5在移动Web中的应用 了解Web技术的发展历程对于掌握HTML5及其在移动端的应用至关重要。这部分将涉及HTML、CSS和JavaScript的基础知识,并讨论它们如何与HTML5相结合。此外,会深入...

    Sencha 和 Sencha Touch 简介

    Sencha Touch 是第一个专门设计为移动设备开发 web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web ...

    SenchaTouch 开发指南

    ### Sencha Touch 开发指南知识点概述 #### 一、Sencha Touch 概述与特性 - **Sencha Touch**:一款先进的移动应用开发框架,它能够帮助开发者利用HTML5、CSS3以及JavaScript来构建高性能、跨平台的移动Web应用...

    Sencha Touch in Action

    书中的标签"Sencha"指的是一种基于JavaScript的前端开发工具集,Sencha公司提供的主要产品包括Sencha Ext JS(针对PC端的JavaScript框架)、Sencha Touch(针对移动端的JavaScript框架)和Sencha Animator(一个...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的...对于想要深入理解Sencha Touch框架或者提高移动Web开发技能的开发者来说,《般若人生》的源码是一个宝贵的参考资料。

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...

    sencha touch2学习笔记(一)---环境搭建和开发工具配置

    这包括一个现代的Web浏览器,如Chrome,因为它对HTML5的支持较好,是测试Sencha Touch应用的理想选择。此外,确保你的计算机上已经安装了Node.js,因为Sencha SDK Tools依赖于Node.js环境。 接下来,我们下载并安装...

    Sencha touch 移动开发

    ### Sencha Touch 移动开发知识点详解 #### 一、概览 Sencha Touch 是一款专为移动设备设计的高性能 JavaScript 框架,能够帮助开发者构建原生体验的应用程序。它支持 HTML5 和 CSS3 的最新标准,并且兼容多种移动...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...

    《SenchaTouch权威指南》源代码-

    《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...

    sencha-touch 移动开发

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和交互效果,使得开发者能够构建高性能、跨平台的移动Web应用程序。在深入探讨Sencha Touch移动开发之前,我们先了解一下移动开发的基本概念。...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

Global site tag (gtag.js) - Google Analytics