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