关于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 style="font-size:12px;">' + '<tpl for=".">'?
+ '<div 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}°</span>?
??????? </div>?
??? </tpl>?
</textarea>?
? </body>?
</html>
