Ext6 手机端

写在前边：本文基于Ext 6.01， 以手机端为研究对象，最后更新于 2017年2月28日

---

1、布局相关

描述：一个新页面上下布局，上边一张静态图，下边是一个根据后台数据渲染的dataview列表,当列表内容超出 整个页面可以滑动（如图）

• 页面继承extend:'Ext.Container'

• 页面内容区分上下两部分 items:[{上半部分的图区域的代码},{下半部分列表区域的代码}]

• 需要给items设置属性 layout:'vbox',scrollable:{ x:false, y:true}

• 在dataview 部分还要配置属性 scrollable:false

• 不能用xtype:list 代替 xtype:dataview 会出现在列表区域不能上下滑动页面的情况

• 上述配置 亲测适用于 上下布局 且有一部分为列表的页面 ，比如将图的区域换成一个按钮 items:[{上半部分列表区域的代码},{下半部分的按钮区域的代码}]

---

下方为具体的示例，仅供参考

/**
 * 作者: 于梦中
 * 日期: 创建于2017/2/28 9:27
 * 描述: 儿科 成长关怀页面 妈妈早知道.
 */
Ext.define('MobileMedical.view.home.growingcare.careKnow', {
    extend:'Ext.Container',
    xtype:'care-know',
    config: {
        title:'妈妈早知道',
        layout:'vbox',
        scrollable:{
            x:false,
            y:true
        },
        // controller: 'mycontacts',
        items:[
            {
                style:'border-bottom: 2px solid #ccc;',
                html:   '<div class="care_div">' +
                            '<img src="resources/img/growingcare/care-know-bg.jpg">' +
                        '</div>' +
                        '<div class="care_know_header">' +
                            '<img src="resources/img/growingcare/care-know-hug.png">妈妈早知道' +
                        '</div>'
            },
            {
                xtype:'dataview',
                store:'careknow',
                scrollable:false,
                itemTpl: '<div class="care_list_container">' +
                            '<h1>{title}</h1>' +
                            '<div style="margin-top: 5px;">' +
                                '<div class="care_list_photo"><img src="resources/img/growingcare/care-know-baby.png"/></div>' +
                                '<div class="care_list_note">{content}</div>' +
                                '<div class="care_list_icon"><span><i class="fa fa-calendar"></i>{time}</span><span><i class="fa fa-eye"></i>3453</span></div>' +
                            '</div>'+
                        '</div>',
                listeners: {
                    itemtap:function(){
                        showToast('点击了',1500,'center')
                    }
                }
            }
        ],
        listeners: {
            activate: function() {
                // this.fireEvent('initContactList');
            }
        }
    }
});

---

2.动态修改当前页的title

描述：不同页面可能会跳转到同一页面，比如联系人的显示，从A页面跳转C页面显示所有联系人，title显示"常用联系"，从B页面跳转C页面显示年龄小于14岁的 title显示"我的宝宝"，

 var titleBar = Ext.Viewport.getActiveItem().query('titlebar')[0];
 if(titleBar){
    titleBar.setTitle("我的宝宝");
 }

---

3.获取当前页的xtype

描述：有时候需要判断当前页的xtype，根据每个页面的xtype的不同可以动态显示或开启某些功能

    //获取menu
    var appMain = Ext.ComponentQuery.query('app-main')[0],
            tabBar = appMain.getTabBar();
    //获取当前页的xtype
    var canPopItems = MobileMedical.app.getTabView().innerItems;
    var currentView = canPopItems[canPopItems.length - 1];
    // 如果从login页面回退，回退页面为growingcare，则隐藏tabbar
    if (currentView.xtype === "growingcare" &&  item.xtype === 'login'){
        tabBar.setHidden(true);
    }

---

4.store的一种使用方法

描述：数据渲染的时候从后台请求后需要存储在store里

 {
                xtype: 'dataview',
                itemTpl: '<div class="care_list_container">' +
                '<h1>{title}</h1>' +
                '<div style="margin-top: 5px;">' +
                '<div class="care_list_photo"><img src="resources/img/growingcare/care-know-baby.png"/></div>' +
                '<div class="care_list_note">{short-content}</div>' +
                '<div class="care_list_icon"><span><i class="fa fa-calendar"></i>{time}</span>' +
                //'<span><i class="fa fa-eye"></i>3453</span>' +
                '</div>' +
                '</div>' +
                '</div>',
                listeners: {
                    itemtap: 'onKnowItemTap'
                }
            }

 /**
     * 对应的controller里
     *初始化数据
     */
    initData: function () {
        var me = this,
            view = me.getView(),
            dataview = view.down('dataview');
        var pageIndex = '0',  //请求第一页的数据
            pageNum = '2';   //只显示两条
        Ext.Global.Ajax.getNewsList(pageIndex, pageNum, function(jsonData) {
            console.info('getNewsList success..', jsonData);
            me.monKnowData = jsonData.newsList;
            if (!me.store) {
                me.store = Ext.create('Ext.data.Store');
                me.store.setModel('MobileMedical.model.careknow');
            }
            var partArray = Ext.Array.slice(me.monKnowData, 0, 2);
            me.store.setData(partArray);
            dataview.setStore(me.store);
        }, function(msg) {
            console.info('getNewsList fail....', msg);
        });

---

5.sencha app build android报错

描述：见图

解决方法：
进入到自己项目的cordova目录cd cordova，在该目录下执行cordova platform remove android,然后再重建cordova platform add android

执行完毕后再次运行sencha app build android运行成功，问题得以解决

6.adb devices 报错

描述：见图，拔掉重插并不能解决

原因：端口占用

解决方法：任务管理器直接杀掉，如果不行的话
找到桌面的，@@@@，点取消

7.执行cordova build android若出现了以下错误：

原因是上一步添加的android平台的android target是android-22，而目前只安装了android-23的API。
解决方法是 修改platforms下的android下的AndroidManifest.xml和project.properties中的

若出现如下图所示标注的字眼，则说明build成功

8.