`
三里小龙
  • 浏览: 87920 次
  • 性别: Icon_minigender_1
  • 来自: 孝感
社区版块
存档分类
最新评论

Sencha Touch静态面板切换

TabPanelModelListStorePanel 
阅读更多

/**

 * 名人关注模型

 */

Ext.regModel("focusFamous",{

fields: [{

name: 'id',

type: 'string'

},{

name: 'pic',

type: 'string'

},{

name: 'name',

type: 'string'

},{

name: 'valPic',

type: 'string'

},{

name: 'sex',

type: 'string'

},{

name: 'city',

type: 'string'

},{

name: 'area',

type: 'string'

}]

})

 

/**

 * 好友动态模型

 */

Ext.regModel("friendsAction",{

fields: [{

name: 'id',

type: 'string'

},{

name: 'pic',

type: 'string'

},{

name: 'name', 

type: 'string'

},{

name: 'pubPic', 

type: 'string'

},{

name: 'pubDate',

type: 'string'

},{

name: 'content',

type: 'string'

},{

name: 'agent',

type: 'string'

},{

name: 'transmits',

type: 'integer'

},{

name: 'comments',

type: 'integer'

}]

})

 

/**

 * 名人关注

 * @class travelbook.view.FocusFamous

 * @extends Ext.Panel

 */

travelbook.view.FocusFamous = Ext.extend(Ext.Panel, {

id: 'focusFamous',

modal: true,

centered: true,

floating: true,

isFirst: true,

height: '100%',

width: '100%',

style: 'filter:alpha(opacity=10);'

  +'-moz-opacity:0.5;'

  +'-khtml-opacity: 0.5;'

  +'opacity: 0.5;',

initComponent : function() {

travelbook.view.FocusFamous.superclass.initComponent.call(this);

this.listeners = {

afterlayout: function(){

var famousList = Ext.getCmp('famousList');

if(undefined != famousList){

famousList.setHeight(this.getHeight()-92);

}

}

};

},

dockedItems: [{

xtype: 'toolbar',

ui: 'dark',

title: '关注名人',

layout: {

pack: 'left'

},

dock: 'top'

},{

xtype: 'toolbar',

ui: 'dark',

dock: 'bottom',

layout: 'hbox',

defaults: {

xtype: 'button',

ui: 'decline',

flex: '2'

},

items: [{

text: '关注已选',

handler: function(){

travelbook.community.focusChecked();

}

},{

text: '关注全部',

handler: function(){

travelbook.community.focusAll();

}

},{

text: '取消',

handler: function(){

Ext.getCmp('focusFamous').hide({type:'cube',direction:'up'});

//进入好友列表

travelbook.community.showFriendsList();

}

}]

}],

items: [{

id: 'famousList',

xtype: 'list',

height: '100%',

store: new Ext.data.Store({

model: 'focusFamous',

sorters: 'id',

getGroupString: function(record){

return record.get('id')[0];

},

data: [{

id: '1001',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1002',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1003',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1004',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1005',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1006',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1007',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

},{

id: '1008',

pic: '../images/pic.jpg',

name: '卢静',

valPic: '../images/valPic.jpg',

sex: '女',

city: '浙江',

area: '杭州'

}]

}),

itemTpl: '<div style="float:left;width:80%;font-size:12px;cursor:pointer;" onclick="travelbook.community.showOwnDatum({id})">'

+'<div style="float:left">'

+'<img width="50" height="50" src="{pic}"/>&nbsp;&nbsp;&nbsp;'

+'</div>'

+'<div style="float:left">'

+'<div>'

+'<div>'

+'{name}&nbsp;'

+'<img width="10" height="10" src="{valPic}"/>&nbsp;&nbsp;&nbsp;'

+'</div>'

+'<div>'

+'{sex},&nbsp;{city}&nbsp;{area}'

+'</div>'

+'<div id="discloseDiv{id}">'

+'aaaaa'

+'</div>'

+'</div>'

+'</div>'

+'</div>'

+'<div style="float:right;">'

+'<img name="focusFamousChkImg" id="focusFamousChkImg_{id}" src="../images/unchecked.png" width="50" height="50"  style="cursor:pointer;" onclick="travelbook.community.chooseFamous({id})"/>'

+'</div>'

}]

});

Ext.reg("travelbook.view.FocusFamous",travelbook.view.FocusFamous)

 

 

/**

 * 好友列表

 * @class travelbook.view.FriendsList

 * @extends Ext.Panel

 */

travelbook.view.FriendsList = Ext.extend(Ext.Panel, {

id: 'friendsList',

height: '100%',

// width: '100%',

style: 'background:transparent',

initComponent : function() {

travelbook.view.FocusFamous.superclass.initComponent.call(this);

},

items: [{

id: 'membersList',

xtype: 'list',

height: '100%',

width: '100%',

store: new Ext.data.Store({

model: 'friendsAction',

sorters: 'id',

getGroupString: function(record){

return record.get('id')[0];

},

//id pic name pubDate content agent transmits comments

data: [{

id: '2001',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2002',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2003',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2004',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2005',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2006',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2007',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

},{

id: '2008',

pic: '../images/_pic.jpg',

name: '抽烟发芽',

pubPic: '../images/_valPic.jpg',

pubDate: '2分钟前',

content: '今天天气非常好,适合海边去泡一泡.一早起床建议大家多使用车主宝典.',

agent: '车主宝典',

transmits: 6,

comments: 8

}]

}),

itemTpl: '<table style="font-size:12px;width:100%;">'

+'<tr>'

+'<td>'

+'<img width="60" height="60" src="{pic}"/>'

+'</td>'

+'<td>'

+'<div>'

+'<div style="float:left">'

+'{name}'

+'</div>'

+'<div style="float:right">'

+'<img width="10" height="10" src="{pubPic}"/>&nbsp;{pubDate}'

+'</div>'

+'</div>'

+'<div>'

+'<div style="color:green">'

+'<div style="float:left">'

+'{content}'

+'</div>'

+'<div style="float:right">'

+'&nbsp;'

+'</div>'

+'</div>'

+'</div>'

+'<div>'

+'<div style="float:left">'

+'转发({transmits})评论({comments})'

+'</div>'

+'<div style="float:right">'

+'来自{agent}'

+'</div>'

+'</div>'

+'</td>'

+'</tr>'

+'</table>',

listeners : {

itemtap : function(list, index, item, e) {

var store = list.getStore(),

host = store.getAt(index);

//进入动态详情

travelbook.community.showActionDetail();

}

}

}]

});

Ext.reg("travelbook.view.FriendsList",travelbook.view.FriendsList)

 

 

/**

 * 个人信息

 * @class travelbook.view.PersonalInfo

 * @extends Ext.Panel

 */

travelbook.view.PersonalInfo = Ext.extend(Ext.Panel, {

id: 'personalInfo',

width: '100%',

layout: 'card',

style: 'background:#FFFFFF;',

initComponent : function() {

travelbook.view.PersonalInfo.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([

'<div style="background:#FFFFFF;">'

+ '<tpl for=".">'

+ '<table style="width:100%;font-size:13px;">'

+ '<tr>'

+ '<td>'

+ '<div>'

+'<img src="{pic}" width="45" height="45" style="cursor:pointer;" onclick="travelbook.community.showOwnDatum({id})"/>'

+ '</div>'

+ '</td>'

+ '<td>'

+ '<div>'

+'{name}&nbsp;'

+'<img src="{valPic}" width="10" height="10"/>'

+ '</div>'

+ '<div>'

+'<img src="{levelSun}" width="15" height="15"/>'

+'<img src="{levelMoon}" width="15" height="15"/>'

+'<img src="{levelStar}" width="15" height="15"/>'

+'</div>'

+ '</td>'

+ '<td style="text-align:center;">'

+ '<div>'

+'<img src="{arrowPic}" width="30" height="30"/>'

+ '</div>'

+ '<div style="font-size:12px;">'

+'{levelName}&nbsp;'

+ '</div>'

+ '</td>'

+ '</tr>'

+ '</table>'

+'</tpl></div>'

])

});

Ext.reg("travelbook.view.PersonalInfo",travelbook.view.PersonalInfo);

 

 

/**

 * 个人信息(详情)

 * @class travelbook.view.PersonalInfoDetail

 * @extends Ext.Panel

 */

travelbook.view.PersonalInfoDetail = Ext.extend(Ext.Panel, {

id: 'personalInfoDetail',

layout: 'card',

width: '100%',

style: 'background:#FFFFFF;',

initComponent : function() {

travelbook.view.PersonalInfoDetail.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([

'<div style="background:#FFFFFF;">'

+ '<tpl for=".">'

+ '<table style="width:100%;font-size:13px;">'

+ '<tr>'

+ '<td>'

+ '<div>'

+'<img src="{pic}" width="45" height="45"/>'

+ '</div>'

+ '</td>'

+ '<td>'

+ '<div>'

+'{name}&nbsp;'

+'<img src="{valPic}" width="10" height="10"/>'

+ '</div>'

+ '<div>'

+'<img src="{levelSun}" width="15" height="15"/>'

+'<img src="{levelMoon}" width="15" height="15"/>'

+'<img src="{levelStar}" width="15" height="15"/>'

+'</div>'

+ '</td>'

+ '<td style="text-align:center;">'

+ '<div>'

+'<img src="{arrowPic}" width="30" height="30"/>'

+ '</div>'

+ '<div style="font-size:12px;">'

+'{levelName}&nbsp;'

+ '</div>'

+ '</td>'

+ '</tr>'

+ '</table>'

// + '<div id="iframe">'

// + '</div>'

+'</tpl></div>'

])

});

Ext.reg("travelbook.view.PersonalInfoDetail",travelbook.view.PersonalInfoDetail);

 

 

/**

 * 访友列表

 * @class travelbook.view.FriendGroups

 * @extends Ext.Panel

 */

travelbook.view.FriendGroups = Ext.extend(Ext.Panel, {

id: 'friendGroups',

width: '85%',

layout: 'card',

initComponent : function() {

travelbook.view.FriendGroups.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([

'<div>'

+'<tpl for=".">'

+'<table cellspacing="10" cellpadding="10" width="100%" style="font-size:12px;border: 1px solid white;">'

+'<tr>'

+'<td>'

+'<img width="40" height="40" src="{pic}"/>'

+'</td>'

+'<td width="200">'

+'<div>'

+'<div style="float:left;color:#FFFFFF;">'

+'{name}'

+'</div>'

+'<div style="float:right;color:#FFFFFF;">'

+'&nbsp;&nbsp;&nbsp;<img width="10" height="10" src="{pubPic}"/>&nbsp;&nbsp;{pubDate}'

+'</div>'

+'</div>'

+'<div width="100%">'

+'<div>'

+'<div style="float:left;color:green;">'

+'{content}'

+'</div>'

+'<div style="float:right">'

+'&nbsp;'

+'</div>'

+'</div>'

+'</div>'

+'</td>'

+'</tr>'

+'</table>'

+'</tpl></div>'

])

});

Ext.reg("travelbook.view.FriendGroups",travelbook.view.FriendGroups);

 

 

/**

 * 个人语录

 * @class travelbook.view.PersonalWords

 * @extends Ext.Panel

 */

travelbook.view.PersonalWords = Ext.extend(Ext.Panel, {

id: 'personalWords',

width: '100%',

layout: 'card',

initComponent : function() {

travelbook.view.PersonalWords.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([

'<div>'

+ '<tpl for=".">'

+ '<div style="font-size:13px;">'

+ '<div style="float:left;position:absolutly;width:100%;color:#FFFFFF;">'

+ '<div style="float:left;">'

+'转发了消息，并且说：{saywords}'

+ '</div>'

+ '<div style="float:right;">'

+'{pubDate}'

+ '</div>'

+ '</div>'

+ '<div style="float:left;position:absolutly;">'

+ '<div>'

+'<span style="color:#FFFFFF;">@{fromAuthor}</span>: '

+'<span style="color:#FFFF3C;">{content}</span>'

+ '</div>'

+ '<div style="color:#FFFFFF;;">'

+'原文转发({transmits}) | 原文评论({comments})'

+ '</div>'

+ '</div>'

+ '</div>'

+'</tpl></div>'

])

});

Ext.reg("travelbook.view.PersonalWords",travelbook.view.PersonalWords);

 

 

/**

 * 个人勋章

 * @class travelbook.view.Honour

 * @extends Ext.Panel

 */

travelbook.view.Honour = Ext.extend(Ext.Panel, {

id: 'honour',

layout: 'card',

width: '100%',

style: 'background:#FFFFFF;font-size:12px;',

initComponent : function() {

travelbook.view.Honour.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([ 

'<div>'

+ '<tpl for=".">'

+ '<div>'

+'<span style="color:#336699;"><b>TA的勋章：</b></span>'

+'<img src="{honourPic}" width="20" height="20"/><img src="{honourPic}" width="20" height="20"/>'

+ '</div>'

+ '</tpl>'

+'</div>'

])

});

Ext.reg("travelbook.view.Honour",travelbook.view.Honour);

 

 

/**

 * 个人介绍

 * @class travelbook.view.IntroduceSura

 * @extends Ext.Panel

 */

travelbook.view.IntroduceSura = Ext.extend(Ext.Panel, {

id: 'introduceSura',

layout: 'card',

width: '100%',

style: 'background:#FFFFFF;font-size:12px;',

initComponent : function() {

travelbook.view.IntroduceSura.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([ 

'<div style="background:#FFFFFF;">'

+ '<tpl for=".">'

+ '<div>'

+'<span style="color:#336699;"><b>TA的简介：</b></span>&nbsp;{introduce}'

+ '</div>'

+ '</tpl>'

+'</div>'

])

});

Ext.reg("travelbook.view.IntroduceSura",travelbook.view.IntroduceSura);

 

 

/**

 * 应用项

 * @class travelbook.view.AppItem

 * @extends Ext.Panel

 */

travelbook.view.AppItem = Ext.extend(Ext.Panel, {

id: 'appItem',

layout: 'card',

width: '100%',

style: 'background:#FFFFFF;font-size:12px;',

initComponent : function() {

travelbook.view.AppItem.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([ 

'<div style="background:#FFFFFF;">'

+ '<tpl for=".">'

+ '<table cellspacing="10" cellspadding="5" width="100%" style="text-align:center;">'

+ '<tr>'

+ '<td style="border-top:1px solid #336699;border-right:1px solid #336699;">'

+ '<div style="color:#336699;"><b>{focus}</b></div>'

+ '<div>关注</div>'

+ '</td>'

+ '<td style="border-top:1px solid #336699;border-right:1px solid #336699;">'

+ '<div style="color:#336699;font:bold;"><b>{fans}</b></div>'

+ '<div>粉丝</div>'

+ '</td>'

+ '<td style="border-top:1px solid #336699;border-right:1px solid #336699;">'

+ '<div style="color:#336699;font:bold;"><b>{speakings}</b></div>'

+ '<div>发言</div>'

+ '</td>'

+ '<td style="border-top:1px solid #336699;border-right:1px solid #336699;">'

+ '<div style="color:#336699;font:bold;"><b>{label}</b></div>'

+ '<div>标注</div>'

+ '</td>'

+ '<td style="border-top:1px solid #336699;border-right:1px solid #336699;">'

+ '<div style="color:#336699;font:bold;"><b>{stepPoints}</b></div>'

+ '<div>踩点</div>'

+ '</td>'

+ '</tr>'

+ '</table>'

+ '</tpl></div>'

])

});

Ext.reg("travelbook.view.AppItem",travelbook.view.AppItem);

 

 

/**

 * 个人言论

 * @class travlebook.view.OwnWords

 * @extends Ext.Panel

 */

travelbook.view.OwnWords = Ext.extend(Ext.Panel, {

id: 'ownWords',

layout: 'card',

width: '100%',

initComponent : function() {

travelbook.view.OwnWords.superclass.initComponent.call(this);

},

recordTpl: new Ext.XTemplate([

'<div style="background:gray;color:#FFFFFF;">'

+ '<tpl for=".">'

+ '<div style="font-size:13px;">'

+ '<div style="text-align:right;">'

+'{pubDate}'

+ '</div>'

+ '<div>'

+'{content}'

+ '</div>'

+ '<div>'

+ '<div>'

+'<img src="{suraPic}" width="50" height="50"/>'

+ '</div>'

+ '<div>'

+'&nbsp;&nbsp;&nbsp;'

+ '</div>'

+ '</div>'

+ '<div>'

+ '<div style="float:left;">'

+'转发({transmits}) 评论({comments})'

+ '</div>'

+ '<div style="float:right;">'

+'来自{agent}'

+ '</div>'

+ '</div>'

+ '</div>'

+'</tpl></div>'

])

});

Ext.reg("travelbook.view.OwnWords",travelbook.view.OwnWords);

 

 

/**

 * 动态详情

 * @class travelbook.view.ActionDetail

 * @extends Ext.Panel

 */

travelbook.view.ActionDetail = Ext.extend(Ext.Panel, {

id: 'actionDetail',

fullscreen: true,

isLoaded: false,

scroll: 'vertical',

style: 'background:gray;',

layout: 'vbox',

width: '100%',

initComponent : function() {

travelbook.view.ActionDetail.superclass.initComponent.call(this);

},

listeners: {

added: function(){

this.add({xtype: 'travelbook.view.PersonalInfo'});

this.add({xtype: 'travelbook.view.PersonalWords'});

this.add({xtype: 'travelbook.view.FriendGroups'});

this.doLayout(true,false);

},

show: function(){

//加载数据

travelbook.community.loadActionDetailData();

},

activate: function(){

travelbook.controller.BackTarget  = 'community';

}

},

dockedItems: [{

xtype: 'travelbook.view.Topbar',

title: '动态详情',

back: function(){

travelbook.community.back();

}

},{

xtype: 'panel',

dock: 'bottom',

layout: {

type: 'hbox',

align: 'center',

pack: 'center'

},

style: 'background:white;',

defaults: {

xtype: 'button',

ui: 'round'

},

items: [{

text: '∑',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '⊙',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '⊿',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '●',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '∏',

handler: function(){

Ext.Msg.alert('',this.text);

}

}]

}]

});

Ext.reg("travelbook.view.ActionDetail",travelbook.view.ActionDetail);

 

 

/**

 * TA的资料

 * @class travelbook.view.OwnDatum

 * @extends Ext.Panel

 */

travelbook.view.OwnDatum = Ext.extend(Ext.Panel, {

id: 'ownDatum',

isLoaded: false,

layout: 'vbox',

scroll: 'vertical',

style: 'background:gray;',

initComponent : function() {

travelbook.view.OwnDatum.superclass.initComponent.call(this);

},

listeners: {

added: function(){

this.add({xtype: 'travelbook.view.PersonalInfoDetail'});

this.add({xtype: 'travelbook.view.Honour'});

this.add({xtype: 'travelbook.view.IntroduceSura'});

this.add({xtype: 'travelbook.view.AppItem'});

this.add({xtype: 'travelbook.view.OwnWords'});

this.doLayout(true,false);

},

show: function(){

//加载数据

travelbook.community.loadOwnDatumData();

},

activate: function(){

travelbook.controller.BackTarget  = 'actionDetail';

}

},

dockedItems: [{

xtype: 'travelbook.view.Topbar',

title: 'TA的资料',

back: function(){

travelbook.community.back();

}

},{

xtype: 'panel',

dock: 'bottom',

layout: {

type: 'hbox',

align: 'center',

pack: 'center'

},

style: 'background:white;',

defaults: {

xtype: 'button',

ui: 'round'

},

items: [{

text: '＠',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '〓',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '▼',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '★',

handler: function(){

Ext.Msg.alert('',this.text);

}

},{

text: '＆',

handler: function(){

Ext.Msg.alert('',this.text);

}

}]

}]

});

Ext.reg("travelbook.view.OwnDatum",travelbook.view.OwnDatum);

 

 

/***

 * 社区

 * @class travelbook.view.Community

 * @extends Ext.Panel

 */

travelbook.view.Community = Ext.extend(Ext.Panel, {

id: 'community',

fullscreen : true,

layout: 'card',

initComponent : function() {

travelbook.view.Community.superclass.initComponent.call(this);

this.activeItem = 0;

this.listeners = {

added: function(){

//显示名人关注

travelbook.community.showFocusFamous();

},

show: function(){

//显示好友列表

travelbook.community.showFriendsList();

},

activate: function(){

travelbook.controller.BackTarget  = 'main';

}

};

},

dockedItems : [{

xtype: 'travelbook.view.Topbar',

title: '社区',

back:function(){

travelbook.community.back();

}

}],

items: [{

//好友动态

id: 'friendAction',

xtype: 'tabpanel',

ui: 'light',

activeItem: 1,

listeners: {

afterlayout: function(self,layout){

var membersList = Ext.getCmp('membersList');

var community = Ext.getCmp('community');

if((undefined != membersList)&&(undefined != community)){

membersList.setHeight(community.getHeight()-92);

}

}

},

items: [{

id: 'squareTab',

title: '广场',

html: 'square ...'

},{

id: 'friendsTab',

height: '100%',

title: '好友'

},{

id: 'communicationTab',

title: '热议',

html: 'communication ...'

}]

}]

});

Ext.reg("travelbook.view.Community", travelbook.view.Community);

 

 

/***

 * 全局回退标识

 * @type String

 */

travelbook.controller.BackTarget = 'main';

 

 

/***

 * 控制器

 */

travelbook.community = new Ext.Controller({

 

//显示名人关注

showFocusFamous: function(){

var focusFamous = Ext.getCmp('focusFamous');

if (undefined == focusFamous) {

Ext.getCmp('viewport').addItem({xtype:'travelbook.view.FocusFamous'});

}

Ext.getCmp('focusFamous').show({type:'slide',direction:'up'});

},

//显示好友列表

showFriendsList: function(){

var community = Ext.getCmp('community');

var friendAction = Ext.getCmp('friendAction');

var friendsList = Ext.getCmp('friendsList');

var friendsTab = Ext.getCmp('friendsTab');

if (undefined == friendsList) {

friendsTab.add({xtype: 'travelbook.view.FriendsList'});

friendsTab.doLayout();

}

friendAction.setActiveItem(friendsTab);

community.setActiveItem(friendAction);

Ext.getCmp('viewport').setActiveItem(community);

},

//显示动态详情

showActionDetail: function(){

var actionDetail = Ext.getCmp('actionDetail');

if (undefined == actionDetail) {

Ext.getCmp('viewport').addItem({xtype:'travelbook.view.ActionDetail'});

}

Ext.getCmp('viewport').setActiveItem('actionDetail',{type:'cube',direction:'left'});

//设置回退标识

travelbook.controller.BackTarget  = 'community';

},

//显示TA的资料

showOwnDatum: function(id){//名人Id

//隐藏名人关注

Ext.getCmp("focusFamous").hide("flip");

var ownDatum = Ext.getCmp('ownDatum');

if (undefined == ownDatum) {

Ext.getCmp("viewport").addItem({xtype:"travelbook.view.OwnDatum"});

}

Ext.getCmp("viewport").setActiveItem("ownDatum",{type:'cube',direction:'left'});

//设置回退标识

travelbook.controller.BackTarget  = 'actionDetail';

},

//选中或取消选中关注对象

chooseFamous: function(id){//名人Id

var focusFamousChkImg = document.getElementById('focusFamousChkImg_'+id),

imgSrc = focusFamousChkImg.src;

var status = imgSrc.substring(imgSrc.lastIndexOf('/')+1,imgSrc.lastIndexOf('.'));

if(status == 'unchecked'){

focusFamousChkImg.src = '../images/checked.png';

}else {

focusFamousChkImg.src = '../images/unchecked.png';

}

},

//关注选中

focusChecked: function(){

//计数器,批量Id,临时Id,图片路径,状态标量

var cnt = 0, ids = '',tmpId, imgSrc = '', status = '';

var focusFamousChkImg = document.getElementsByName('focusFamousChkImg');

for(var i=0; i<focusFamousChkImg.length; i++){

imgSrc = focusFamousChkImg[i].src;

status = imgSrc.substring(imgSrc.lastIndexOf('/')+1,imgSrc.lastIndexOf('.'));

if(status == 'checked'){

cnt ++;

tmpId = focusFamousChkImg[i].id;

ids += tmpId.substring(tmpId.lastIndexOf('_')+1,tmpId.length) + ','; 

}

}

ids = ids.substring(0, ids.length-1); 

if(cnt == 0){

alert('您没有关注任何人喔，赶紧选一个吧~');

}else{

alert('共关注 '+cnt+' 人, \r\n编号: '+ids);

}

},

//关注全部

focusAll: function(){

//计数器,批量Id,临时Id

var cnt = 0, ids = '',tmpId;

var focusFamousChkImg = document.getElementsByName('focusFamousChkImg');

for(var i=0; i<focusFamousChkImg.length; i++){

focusFamousChkImg[i].src = '../images/checked.png';

cnt ++;

tmpId = focusFamousChkImg[i].id;

ids += tmpId.substring(tmpId.lastIndexOf('_')+1,tmpId.length) + ','; 

}

ids = ids.substring(0, ids.length-1); 

alert('共关注 '+cnt+' 人, \r\n编号: '+ids);

},

//加载动态详情各组件数据

loadActionDetailData: function(){

var actionDetail = Ext.getCmp('actionDetail');

if(!actionDetail.isLoaded){

actionDetail.isLoaded = true;

var personalInfo = Ext.getCmp('personalInfo'), 

personalInfoTpl = personalInfo.recordTpl;

var data = [{

id: '2001',

pic: '../images/portrait.jpg',

name: '爱煮茶',

valPic: '../images/valPic.jpg',

levelSun: '../images/sun.jpg',

levelMoon: '../images/moon.jpg',

levelStar: '../images/star.jpg',

levelName: '赤脚大仙',

arrowPic: '../images/arrow.jpg'

}];

personalInfoTpl.overwrite(personalInfo.body, data);

 

var personalWords = Ext.getCmp('personalWords'), 

personalWordsTpl = personalWords.recordTpl;

var data = [{

id: '2001',

name: '爱煮茶',

saywords: '说的在理儿。',

pubDate: '20分钟前',

levelName: '赤脚大仙',

fromAuthor: '琳敏卿',

content: '65岁的富翁正在与一位风华正茂的妙龄女子谈恋爱，而且准备向她求婚，他征求自己的好朋友的意见：假如我说自己45岁，她是不是会嫁给我？ 假如你说自己今年90岁，朋友狡黠地回答，那么成功率会更大些！',

transmits: 6,

comments: 8

}];

personalWordsTpl.overwrite(personalWords.body, data);

 

var friendGroups = Ext.getCmp('friendGroups'), 

friendGroupsTpl = friendGroups.recordTpl;

var data = [{

id: '2001',

pic: '../images/__pic.jpg',

name: '咖啡有毒',

pubPic: '../images/__valPic.jpg',

pubDate: '20分钟前',

content: '有朋友就是好哇！'

},{

id: '2002',

pic: '../images/__pic.jpg',

name: '咖啡有毒',

pubPic: '../images/__valPic.jpg',

pubDate: '20分钟前',

content: '有朋友就是好哇！.'

}];

friendGroupsTpl.overwrite(friendGroups.body, data);

actionDetail.doLayout(true,false);

}

},

//加载TA的资料

loadOwnDatumData: function(){

var ownDatum = Ext.getCmp('ownDatum');

if(!ownDatum.isLoaded){

ownDatum.isLoaded = true;

//个人介绍

var personalInfoDetail = Ext.getCmp('personalInfoDetail'),

personalInfoDetailTpl = personalInfoDetail.recordTpl;

var data = [{

id: '2001',

pic: '../images/portrait.jpg',

name: '爱煮茶',

valPic: '../images/valPic.jpg',

levelSun: '../images/sun.jpg',

levelMoon: '../images/moon.jpg',

levelStar: '../images/star.jpg',

levelName: '赤脚大仙',

arrowPic: '../images/arrow.jpg'

}];

personalInfoDetailTpl.overwrite(personalInfoDetail.body, data);

//this.createIframe('http://192.168.1.136:8080/touch/app/views/community/form.jsp');

//个人勋章

var honour = Ext.getCmp('honour'),

honourTpl = honour.recordTpl;

var data = [{

id: '2001',

honourPic: '../images/Image_BusinessWedding.png'

}];

honourTpl.overwrite(honour.body, data);

//个人简介

var introduceSura = Ext.getCmp('introduceSura'),

introduceSuraTpl = introduceSura.recordTpl;

var data = [{

id: '2001',

introduce: '他还木有介绍!'

}];

introduceSuraTpl.overwrite(introduceSura.body, data);

//动作项

var appItem  = Ext.getCmp('appItem'),

appItemTpl = appItem.recordTpl;

var data = [{

id: '2001',

focus: 20,

fans: 30,

speakings: 123,

label: 12,

stepPoints: 5

}];

appItemTpl.overwrite(appItem.body, data);

//个人转发

var ownWords = Ext.getCmp('ownWords'), 

ownWordsTpl = ownWords.recordTpl;

var data = [{

id: '2001',

pubDate: '6分钟前',

content: '【这些街头小吃最好不要吃】①臭豆腐：硫酸亚铁②麻辣烫：地沟油，双氧水，福尔马林③毛鸡蛋：寄生虫④烤肉串：流泪猫或死猪肉⑤包子：猪肉瘤，血脖肉，死猪肉⑥油饼油条：铝超标，敌敌畏，地沟油⑦海鲜排挡：寄生虫，水银，甲醛⑧煎饼果子：地沟油，过期火腿⑨烤红薯：化工桶⑩炸鸡翅：臭鸡翅.',

suraPic: '../images/Image_AD_Big.png',

transmits: 50,

comments: 10,

agent: '车主宝典'

}];

ownWordsTpl.overwrite(ownWords.body, data);

ownDatum.doLayout(true,false);

}

},

//动态创建iFrame

createIframe: function(url){

 var iframe = document.createElement('iframe');

 iframe.src = url;

 iframe.width = '100%';

 iframe.height = 150;

 iframe.frameborder = 0;  

 iframe.style.border = 'solid black 1px;';

 //alert(document.getElementById("iframe"));

 document.getElementById("iframe").appendChild(iframe);

},

//回退

back: function(){

try{

Ext.getCmp('viewport').setActiveItem(travelbook.controller.BackTarget,{type:'cube',direction:'right'});

}catch(Exception){

//返回至名人关注

Ext.getCmp('viewport').setActiveItem(Ext.getCmp('focusFamous'),{type:'cube',derection:'down'});

}

}

});


0
顶
1
踩
分享到：
| 关于SenchaTouch生成动态TabPanel的一些代 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    touch-docs-2.2.1.zip（senchaTouch 离线API参考文档）

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

    Sencha 和 Sencha Touch 简介

    本文通过对 Sencha Touch 框架的介绍，使读者对该框架有一定的了解，并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...

    sencha touch项目源码

    1. **组件系统**：Sencha Touch的核心是其强大的组件（Component）系统，它允许开发者创建各种复杂的用户界面元素，如按钮、表格、列表、面板等。组件可以嵌套，形成复杂的UI结构。 2. **模型（Model）与存储...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架，它提供了丰富的组件库和强大的数据管理功能，用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题，主要涉及的是如何使用Sencha Touch来设计和实现一...

    Sencha Touch in Action

    《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍，它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架，它是...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架，它提供了丰富的组件库和强大的数据管理功能，用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素，让我们逐一解析这些...

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

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架，专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具，使得开发者能够...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架，它提供了丰富的组件库，用于构建高性能的触屏Web应用。在“sencha touch list demo”中，我们主要关注的是Sencha Touch中的列表(List)组件，这是一个核心且常用的...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架，它使得开发者能够构建功能丰富的、响应式的Web应用程序，这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    sencha touch在VScode上的插件

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

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架，用于构建高性能的触控应用程序。它提供了丰富的组件库，使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用，是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架，专门用于构建触摸优化的移动Web应用程序，而FusionCharts则是一款强大的...

    sencha touch中文翻译文档

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

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合，可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

    Sencha Touch 的核心在于提供一套丰富的组件（Components），包括表格、按钮、面板、表单等，这些组件都是针对触摸操作优化的。通过这些组件，开发者可以快速地搭建出交互性强、用户体验良好的移动应用界面。同时，...

    Sencha Touch MVC 模式

    ### FrancisShanahan-SenchaTouch2MVCHelloworld-c330be1项目 该项目是一个基于Sencha Touch 2的MVC模式Hello World示例，可能包含了创建基本模型、视图、控制器的过程，演示了如何通过MVC模式构建一个简单的应用。...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源，尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库，它提供了丰富的UI组件和API，使得...

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 是一个流行的JavaScript框架，专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理，使得开发者可以创建与原生应用类似的交互体验。MVC（Model-View-Controller）架构模式...

Magicbox
Global site tag (gtag.js) - Google Analytics