关于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=
'
+'
+'
+'
+'
mars.view.XTpl.Two=new Ext.XTemplate([
'
+ '
+ '
'{empName}',
'{empno}
]);
/*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