关于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= 
'

' 
+'

' 
+'

{empName}

' 
+'

' 
+'

'; 

mars.view.XTpl.Two=new Ext.XTemplate([ 
'

' + '' 
+ '

' 
+ '

{deptno}

', 
'{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 



 
 
 
 
 
 
 
 
 
 
     
 
   
  
   
 <br>    <tpl for="."> <br>        <div> <br>            <div>{deptno}</div> <br>            <span >{deptName}°</span> <br>        </div> <br>    </tpl> <br>