extjs android程序,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: '

' +

'' +

'

' +

'

' +

'妈妈早知道' +

'

'

},

{

xtype:'dataview',

store:'careknow',

scrollable:false,

itemTpl: '

' +

'

{title}

' +

'

' +

'

' +

'

{content}

' +

'

{time} 3453

' +

'

'+

'

',

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: '

' +

'

{title}

' +

'

' +

'

' +

'

{short-content}

' +

'

{time}' +

//'3453' +

'

' +

'

' +

'

',

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.