关于SenchaTouch生成动态TabPanel的一些代码提要

tab_auto.js?


Ext.ns("mars.view");?
Ext.ns("mars.view.Tpl");?
Ext.ns("mars.view.XTpl");?

/*Models*/?
Ext.regModel('Emp', {?
??? fields: [?
??????? {name: 'deptno',? type: 'integer'},?
??????? {name: 'empName', type: 'string'},?
??????? {name: 'empno', type: 'string'}?
??? ]?
});?

/*Common List*/?
mars.view.List = (function(listId,model,url,sorters,itemTpl){?
var _self;?
return _self = {?
id: model+listId,?
xtype: 'list',?
width: '100%',?
height: '100%',?
store : new Ext.data.Store({?
model : model,?
??? proxy: {?
??????? type: 'ajax',?
??????? url : url,?
??????? reader: {?
??????????? type: 'json',?
??????????? root: model?
??????? }?
??? },?
??? autoLoad: true,?
sorters : sorters,?
getGroupString : function(record) {?
return record.get(sorters)[0];?
}?
}),?
itemTpl: itemTpl,?
listeners: {?
itemtap: function(list, index, item, e) {?
var store = list.getStore(),?
host = store.getAt(index);?
Ext.Msg.alert(host.get(sorters));?
}?
}?
};?
});?

/*Templetes*/?
mars.view.Tpl.One=?
'<div class="contact">'?
+'<div style="font-size:11pt;float:left;">'?
+'<div style="margin:0.5em 0.5em 0.5em;"><span style="color:red;">{empName}</span></div>'?
+'</div>'?
+'</div>';?

mars.view.XTpl.Two=new Ext.XTemplate([?
'<div class="demo-weather" style="font-size:12px;">' + '<tpl for=".">'?
+ '<div class="day">'?
+ '<div class="temp">{deptno}</div>',?
'<span class="temp">{empName}</span>',?
'<span class="temp">{empno}</span></div></tpl></div>'?
]);?

/*TabPanel*/?
mars.view.Tab = (function(){?
var _self;?
return _self = Ext.extend(Ext.TabPanel, {?
id: '',?
fullscreen: true,?
ui : 'dark',?
items: [{id: 'spacerTemp',xtype: 'button'}],//initial a temp component to make the tab style normal.?
/*---User-defined Attributes---*/?
count: 1,?
url: '',?
/*-----------------------------*/?
constructor: function(tabId,url){?
this.id = tabId;?
this.url = url;?
_self.superclass.constructor.call(this);?
},?
initComponent: function(){?
_self.superclass.initComponent.call(this);?
this.tabBar.scroll='horizontal';?
},?
listeners: {?
added: function(){?
var tabId = this.id;?
var url = this.url;?
??????? Ext.Ajax.request({?
??????????? url: url,?
??????????? success: function(response, opts) {?
??????????????? Ext.getCmp(tabId).remove(Ext.getCmp('spacerTemp'));//remove the temp tab?
??????????????? Ext.getCmp(tabId).add(eval('('+response.responseText+')'));?
??????????????? Ext.getCmp(tabId).setActiveItem(0);//set the active item via index?
?????????????? Ext.getCmp(tabId).doLayout();?
}?
??????? });?
},?
cardswitch:? function(obj, newCard, oldCard, index, animated){?
try{?
if(this.count>1){?
newCard.remove(Ext.getCmp(this.model+newCard.id));?
this.addDynamicItems(obj, newCard, oldCard, index, animated);?
}else{?
this.addDynamicItems(obj, newCard, oldCard, index, animated);?
}?
newCard.doLayout();?
this.count++;?
}catch(Exception){?
void(0);?
}?
}?
},?
addDynamicItems: function(obj, newCard, oldCard, index, animated){?
switch(index){?
case 0:?
var url = '../base/fetchEmp.do?deptno='+newCard.id;?
newCard.add(mars.view.List(newCard.id,'Emp',url,'deptno',mars.view.Tpl.One));?
break;?
case 1:?
var url = '../base/fetchEmpTest.do?deptno='+newCard.id;?
newCard.add(new mars.view.Panel('autoPanel',url,mars.view.XTpl.Two));?
break;?
}?
}?
});
})();?


/*Panel*/?
mars.view.Panel = (function(){?
var _self;?
return _self = Ext.extend(Ext.Panel, {?
id: '',?
scroll: 'vertical',?
fullscreen: true,?
/*---User-defined Attributes---*/?
url: '',?
xtpl: '',?
/*-----------------------------*/?
constructor: function(id,url,xtpl){?
this.id = id;?
this.url = url;?
this.xtpl = xtpl;?
_self.superclass.constructor.call(this);?
},?
initComponent: function(){?
_self.superclass.initComponent.call(this);?
this.listeners = {?
added: this.loadRecord?
};?
},?
items: [{?
xtype: 'panel',?
scroll: 'vertical'?
}],?
loadRecord: function() {?
var pnl = this.items.get(0);?
var xtpl = this.xtpl;?
Ext.Ajax.request({?
url: this.url,?
success: function(response, opts) {?
xtpl.overwrite(pnl.body, eval('('+response.responseText+')'));?
}?
});?
}?
});
})();?

[align=center][/align]?

tab_auto.html?



<!DOCTYPE html>?
<html>?
<head>?
<meta http-equiv="Content-Type" content="text/html">?
<title>Form</title>?
<link rel="stylesheet" type="text/css" href="../lib/touch/resources/css/sencha-touch.css">?
<script type="text/javascript" src="../lib/touch/sencha-touch.js"></script>?
<script type="text/javascript" src="../lib/touch/sencha-touch-debug.js"></script>?
<script type="text/javascript" src="testPanel.js"></script>?
<script type="text/javascript" src="tab_auto.js"></script>?
??? <style type="text/css" media="screen">?
??????? .day {?
??????????? float: left;?
??????????? background-color: #c5c5c5;?
??????????? color: rgba(0,0,0,.5);?
??????????? text-shadow: #fff 0 1px 0;?
??????????? margin: 1%;?
??????????? width: 18%;?
??????????? text-align: center;?
??????????? -webkit-border-radius: 15px;?
??????????? border-bottom: 1px solid #999;?
??????????? padding: 15px;?
??????? }?
????????
??????? .x-phone .day {?
??????????? float: none;?
??????????? width: 98%;?
??????????? padding: 10px;?
??????? }?
????????
??????? .day img {?
??????????? display: block;?
??????????? margin: 0 auto;?
??????? }?

??????? .temp {?
??????????? display: block;?
??????????? margin: 20px 0;?
??????????? font-size: 48px;?
??????????? line-height: 40px;?
??????? }?
????????
??????? .day .temp_low {?
??????????? display: inline;?
??????? }?
????????
??????? .temp_low {?
??????????? display: block;?
??????????? font-size: 26px;?
??????????? color: rgba(30,30,30,.5);?
??????? }?
????????
??????? .date {?
??????????? margin: 10px 0 5px;?
??????????? font-size: 11px;?
??????????? font-weight: bold;?
??????? }?
??????? .demos-loading {?
????????? background: rgba(0,0,0,.3) url(../resources/shared/loading.gif) center center no-repeat;?
????????? display: block;?
????????? width: 10em;?
????????? height: 10em;?
????????? position: absolute;?
????????? top: 50%;?
????????? left: 50%;?
????????? margin-left: -5em;?
????????? margin-top: -5em;??
????????? -webkit-border-radius: .5em;?
????????? color: #fff;?
????????? text-shadow: #000 0 1px 1px;?
????????? text-align: center;?
????????? padding-top: 8em;?
????????? font-weight: bold;?
??????? }?
??? </style>?
<script type="text/javascript">?
<!--?
new Ext.Application({?
launch: function(){?
this.viewport = new Ext.Panel({?
id: 'mp',?
fullscreen: true,?
layout: 'vbox',?
items: [{?
xtype: 'button',?
ui: 'round',?
text: 'test',?
handler: function(){?
//Ext.getCmp('mp').add(new mars.view.TestPanel());?
//Ext.getCmp('mp').doLayout();?

Ext.getCmp('mp').add(new mars.view.Tab('autoTab','../base/fetchDept.do'));?
Ext.getCmp('mp').doLayout();?
}?
}]?
});?
}?
});?
//-->?
</script>?
? </head>?
??
? <body>?
<textarea id="dept" class="x-hidden-display">?
??? <tpl for=".">?
??????? <div>?
??????????? <div>{deptno}</div>?
??????????? <span >{deptName}&deg;</span>?
??????? </div>?
??? </tpl>?
</textarea>?
? </body>?
</html>