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

标签: html 移动 web | 发表时间:2012-08-18 12:05 | 作者:
出处:http://www.iteye.com
《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();
        });
    },





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html 移动 web] 推荐:

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

- - ITeye博客
《HTML 5移动web开发指南》,是UC公司著名前端开发师唐俊开(网名:三桥). 的新书,介绍了jquery mobile,sencha touch,phonegap的开发,内容很丰富,. 最后还有一个小的实例,推荐阅读,给分85分,下面是其中sencha touch的. 一些本人新学到的知识点小结.

Opera TV Store正式开放,从此HTML 5 Web应用无处不在

- - 雷锋网
在2011IFA大会上,雷锋网之前介绍过的 Opera展示了 Opera TV Store,本周在 CES上,公司宣布TV Store正式对外开放. Opera TV Store的建立就是为了以一种直观的,屏幕友好的方式让用户享受Web内容及应用,在当中你可以同时打开好几个应用,并将之最小化,就算进行应用外的操作,也能收到应用内消息提醒等.

为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?

- - 知乎每日精选
首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本. 当然你可以选择忽略这一小撮用户,尤其是现在绝大多数网站和应用也是如此选择的,但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

移动web问题小结

- - Web前端 腾讯AlloyTeam Blog | 愿景: 成为地球卓越的Web团队!
这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. 这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制. 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢.

HTML 5在移动端有没有未来?

- - 雷锋网
HTML5 在2012年炒了整整一年,不过自 Facebook移动端从HTML 5转到原生应用后,部分开发者开始失望了,他们开始质疑HTML5在移动端的未来. 但今天Mozilla的HTML开发传道者Chris Heilmann就是来给我们传道解惑的. 他今天要探讨的问题包括HTML5的可发现性、用户体验、性能、货币化、开发工具VS调适以及离线使用和功能.

Google 推出 Web Designer,帮助你做 HTML 5 设计的免费本地应用,支持 Windows 和 OS X

- - 谷奥——探寻谷歌的奥秘
感谢读者 SamRaper 的提醒. Google发布 Web Designer beta,这个Windows和OS X下的免费应用可帮助你制作互动广告和其它HTML 5内容,很显然基于HTML 5的广告将在数年后代替现在满天飞的Flash. Google Web Designer主要特性:.

『Google发布移动Web性能工具PCAP Web Performance Analyzer』

- - jackyrong
最近,Google的Page Speed团队一直在关注如何更好的优化移动Web应用性能. 虽然我们拥有类似Firebug、Page Speed、YSlow!和Chrome/Safari Developer Tools等优秀工具,但是移动浏览器缺少这样的性能分析利器. 为此,Page Speed团队发布了一个分析移动浏览器网络信息的工具——PCAP Web Performance Analyzer.

基于HT for Web的Web SCADA工控移动应用

- - ITeye博客
最近客户采用 HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADA的HMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中的一些知识点进行些梳理和分享,希望对有志于Web SCADA领域的伙伴们提供些帮助. 移动终端呈现方面,HMI界面布局应用和游戏领域有类似的问题,一般对横版或者竖版会有更好的布局效果,例如有些游戏只支持横版的玩法,这对于采用Native的App应用来说不成问题,可将App配置成只能横向或者纵向布局,但对于移动终端浏览器就有点尴尬,目前大部分终端你是不能限制用户旋转平面导致布局变化.

移动端web app开发备忘

- - CSDN博客Web前端推荐文章
最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例. css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;.

让移动全球化:同步移动化Web和全球化Web策略

- - Web App Trend
在世界上,已有超过55,000,000台iPads被人使用, 在2011年,售出了400,000,000台智能机. 公司在指定他们的web以及 mobile app 策略时,已经开始越来越多将“移动优先”考虑在内了. 例如,Hotels.com这个网站,不仅提供了一个移动最优(mobile-optimized)的站点,还针对 iPad和  iPhone提供了专门的mobile apps.