Ext.复杂模板(XTemplate)

<html> <head> <base href="<%=basePath%>"> <link rel="stylesheet" href="extjs/resources/css/ext-all.css" mce_href="extjs/resources/css/ext-all.css"> <!-- ext 核心库 --> <mce:script type="text/javascript" src="extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script> </head> <body style="text-align:center;margin: 0;" mce_style="text-align:center;margin: 0;"> <div style="width:100px;height:100px;background: red" id="target">a</div> </body> </html>

Ext.onReady(function(){ var data = { name: 'loowj', size: 3, options: [ {value:'河北',text:"河北省"}, {value:'株洲',text:"湖南省"}, {value:'武汉',text:"湖北省"} ] }; var t = new Ext.XTemplate( '<select name="{name}" size="{size}">', '<tpl for="options">', /* '<tpl if="xindex%2==0">', '<option value="{value:trim}">', '{text:ellipsis(5)}', '</option>', '</tpl>', '<tpl if="xindex%2==1">', '<option value="{value:trim}" selected=true>', '{text:ellipsis(5)}', '</option>', '</tpl>', */ '<option value="{.:trim}" {[xindex % 2 ==0 ?"selected=true" : ""]}>', '{text:ellipsis(5)}', '</option>', '</tpl>', '</select>' ); t.append('target', data); /* values 遍历时的游标指向的一行记录 parent 如果进入子模板需要用parent引用上一级模板里变量 xindex 循环的索引值,从1开始 xcount 循环的总长度 fm Ext.util.Format,想执行格式化操作,就直接调用 */ }) 

你可能感兴趣的:(html,function,ext,div,stylesheet)