zoukankan      html  css  js  c++  java

  • extjs4 模板值和模板

    1、append方法

    Javascript代码 复制代码 收藏代码
    1. var tpl = new Ext.Template(//定义模板   
    2.     '<table  border=1 cellpadding=0 cellspacing = 0>',   
    3.     '<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',   
    4.     '<tr><td>年龄</td><td>{1}</td></tr>',   
    5.     '<tr><td>性别</td><td>{2}</td></tr>',   
    6.     '</table>'  
    7. )   
    8. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    9. tpl.append('tpl-table',['小王',25,'男']);  
    var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
	'<tr><td>年龄</td><td>{1}</td></tr>',
	'<tr><td>性别</td><td>{2}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);



    2、overwrite方法：

    Javascript代码 复制代码 收藏代码
    1. var tpl = new Ext.Template(//定义模板   
    2.     '<table  border=1 cellpadding=0 cellspacing = 0>',   
    3.     '<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',   
    4.     '<tr><td>年龄</td><td>{age}</td></tr>',   
    5.     '<tr><td>性别</td><td>{sex}</td></tr>',   
    6.     '</table>'  
    7. )   
    8. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    9. tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});  
    var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
	'<tr><td>年龄</td><td>{age}</td></tr>',
	'<tr><td>性别</td><td>{sex}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});



    3、模板中使用格式化函数：

    Javascript代码 复制代码 收藏代码
    1. //定义模板，并指定模板数据的格式化函数   
    2. var tpl = new Ext.Template([   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td width=90>员工姓名</td>',   
    5.     //{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写   
    6.     '<td width=120>{userName:capitalize}</td></tr>',   
    7.     '<tr><td width=90>工作日期</td>',   
    8.     //{WorkDate:this.cusFormat()}使用自定义格式化函数   
    9.     '<td width=120>{WorkDate:this.cusFormat()}</td></tr>',   
    10.     '</table>'  
    11. ]);   
    12. //定义模板数据   
    13. var tplData = {   
    14.     userName : 'tom',   
    15.     WorkDate : new Date(2002,7,1)   
    16. }   
    17. //模板的自定义格式化函数   
    18. tpl.cusFormat = function(date,o){   
    19.     return Ext.Date.format(date,'Y年m月d');   
    20. }   
    21. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    22. tpl.append('tpl-table',tplData);  
    //定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>员工姓名</td>',
	//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
	'<td width=120>{userName:capitalize}</td></tr>',
	'<tr><td width=90>工作日期</td>',
	//{WorkDate:this.cusFormat()}使用自定义格式化函数
	'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
	'</table>'
]);
//定义模板数据
var tplData = {
	userName : 'tom',
	WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
	return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    4、使用自定义格式化函数解析多层json对象

    Javascript代码 复制代码 收藏代码
    1. //定义模板，并指定模板数据的格式化函数   
    2. var tpl = new Ext.Template(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td width=90 >姓名</td>',   
    5.     '<td width=120>{name}</td></tr>',   
    6.     '<tr><td width=90 >年龄</td>',   
    7.     '<td width=120>{age}</td></tr>',   
    8.     '<tr><td width=90 >身高</td>',   
    9.     '<td width=120>{stature:this.parseJson}</td></tr>',   
    10.     '</table>'  
    11. );   
    12. //定义模板数据   
    13. var tplData = {   
    14.     name : 'tom',   
    15.     age : 24,   
    16.     stature : {   
    17.         num : 170,   
    18.         unit : 'cm'  
    19.     }   
    20. }   
    21. //通过自定义格式化函数解析json对象   
    22. tpl.parseJson = function(json){   
    23.     return json.num + json.unit;   
    24. }   
    25. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    26. tpl.append('tpl-table',tplData);  
    //定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td>',
	'<td width=120>{name}</td></tr>',
	'<tr><td width=90 >年龄</td>',
	'<td width=120>{age}</td></tr>',
	'<tr><td width=90 >身高</td>',
	'<td width=120>{stature:this.parseJson}</td></tr>',
	'</table>'
);
//定义模板数据
var tplData = {
	name : 'tom',
	age : 24,
	stature : {
		num : 170,
		unit : 'cm'
	}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
	return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    5、使用tpl标签和for运算符

    Javascript代码 复制代码 收藏代码
    1. //定义模板，使用tpl标签和for运算符   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',   
    5.     '<tpl for=".">',   
    6.     '<tr><td>{name}</td><td>{age}</td></tr>',   
    7.     '</tpl>',   
    8.     '</table>'  
    9. );   
    10. //定义模板数据   
    11. var tplData = [   
    12.     {name:'张三',age:20},   
    13.     {name:'李四',age:25},   
    14.     {name:'王五',age:27},   
    15.     {name:'赵六',age:26}   
    16. ]   
    17. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    18. tpl.append('tpl-table',tplData);  
    //定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
	'<tpl for=".">',
	'<tr><td>{name}</td><td>{age}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
	{name:'张三',age:20},
	{name:'李四',age:25},
	{name:'王五',age:27},
	{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    6、使用parent在子模板中访问父对象

    Javascript代码 复制代码 收藏代码
    1. //定义模板，使用parent在子模板中访问父对象   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',   
    5.     '<tpl for="emps">',   
    6.     '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',   
    7.     '</tpl>',   
    8.     '</table>'  
    9. );   
    10. //定义模板数据   
    11. var tplData = {   
    12.     companyName : 'ACB公司',   
    13.     emps:[   
    14.         {name:'张三',age:20},   
    15.         {name:'李四',age:25},   
    16.         {name:'王五',age:27},   
    17.         {name:'赵六',age:26}   
    18.     ]   
    19. }   
    20. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    21. tpl.append('tpl-table',tplData);  
    //定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
	'<tpl for="emps">',
	'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = {
	companyName : 'ACB公司',
	emps:[
		{name:'张三',age:20},
		{name:'李四',age:25},
		{name:'王五',age:27},
		{name:'赵六',age:26}
	]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    7、数组索引与简单数学运算

    Javascript代码 复制代码 收藏代码
    1. //定义模板，数组索引与简单数学运算   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',   
    5.     '<tpl for=".">',   
    6.     '<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',   
    7.     '</tpl>',   
    8.     '</table>'  
    9. );   
    10. //定义模板数据   
    11. var tplData = [   
    12.         {name : '张三',wage : 1000},   
    13.         {name : '李四',wage : 1200},   
    14.         {name : '王五',wage : 900},   
    15.         {name : '赵六',wage : 1500}   
    16.     ]   
    17. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    18. tpl.append('tpl-table',tplData);  
    //定义模板，数组索引与简单数学运算
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    8、自动渲染简单数组

    Javascript代码 复制代码 收藏代码
    1. //定义模板，自动渲染简单数组   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td>序号</td><td width=90 >姓名</td></tr>',   
    5.     '<tpl for=".">',   
    6.     '<tr><td>{#}</td><td>{.}</td></tr>',   
    7.     '</tpl>',   
    8.     '</table>'  
    9. );   
    10. //定义模板数据   
    11. var tplData = ['张三','李四','王五','赵六']   
    12. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    13. tpl.append('tpl-table',tplData);  
    //定义模板，自动渲染简单数组
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td></tr>',
	'<tpl for=".">',
	'<tr><td>{#}</td><td>{.}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = ['张三','李四','王五','赵六']
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    9、基本的条件逻辑判断

    Javascript代码 复制代码 收藏代码
    1. //定义模板，基本的条件逻辑判断   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0>',   
    4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',   
    5.     '<tpl for=".">',   
    6.     '<tpl if="wage &gt; 1000">',   
    7.     '<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',   
    8.     '</tpl>',   
    9.     '</tpl>',   
    10.     '</table>'  
    11. );   
    12. //定义模板数据   
    13. var tplData = [   
    14.         {name : '张三',wage : 1000},   
    15.         {name : '李四',wage : 1200},   
    16.         {name : '王五',wage : 900},   
    17.         {name : '赵六',wage : 1500}   
    18.     ]   
    19. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    20. tpl.append('tpl-table',tplData);  
    //定义模板，基本的条件逻辑判断
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tpl if="wage &gt; 1000">',
	'<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',
	'</tpl>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    10、在模板中执行任意代码

    Css代码 复制代码 收藏代码
    1. <style type="text/css">   
    2.     .even { background-color: #CCFFFF; }   
    3.     .odd { background-color: #FFFFFF; }   
    4.     .title {text-align: center;}   
    5.   </style>  
    <style type="text/css">
	.even { background-color: #CCFFFF; }
	.odd { background-color: #FFFFFF; }
	.title {text-align: center;}
  </style>
    Javascript代码 复制代码 收藏代码
    1. //定义模板，在模板中执行任意代码   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0 class=title>',   
    4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',   
    5.     '<tpl for="emps">',   
    6.     '<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',   
    7.     '<td>{[xindex]}</td><td>{[values.name]}</td>',   
    8.     '<td>{[values.wage * parent.per]}</td>',   
    9.     '<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',   
    10.     '</tpl>',   
    11.     '<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',   
    12.     '<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',   
    13.     '</table>'  
    14. );   
    15. //模板的自定义格式化函数，用于计算工资总计   
    16. tpl.avgWage = function (o) {   
    17.     var sum = 0;   
    18.     var length = o.emps.length;   
    19.     for(var i = 0 ; i <length ; i++){   
    20.         sum += o.emps[i].wage;   
    21.     }   
    22.     return sum * o.per;   
    23. }   
    24. //定义模板数据，per表示发薪比例，wage表示标准工资   
    25. var tplData = {   
    26.     per : 0.9,   
    27.     emps : [   
    28.         {name : '张三',wage : 1000},   
    29.         {name : '李四',wage : 1200},   
    30.         {name : '王五',wage : 900},   
    31.         {name : '赵六',wage : 1500}   
    32.     ]   
    33. }   
    34. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    35. tpl.append('tpl-table',tplData);  
    //定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0 class="title">',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',
	'<tpl for="emps">',
	'<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',
	'<td>{[xindex]}</td><td>{[values.name]}</td>',
	'<td>{[values.wage * parent.per]}</td>',
	'<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',
	'</tpl>',
	'<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
	'<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',
	'</table>'
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
	var sum = 0;
	var length = o.emps.length;
	for(var i = 0 ; i <length ; i++){
		sum += o.emps[i].wage;
	}
	return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
	per : 0.9,
	emps : [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    11、使用模板成员函数

    Javascript代码 复制代码 收藏代码
    1. //定义模板，在模板中使用模板成员函数   
    2. var tpl = new Ext.XTemplate(   
    3.     '<table border=1 cellpadding=0 cellspacing = 0 class=title>',   
    4.     '<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',   
    5.     '<tpl for=".">',   
    6.     '<tpl if="this.check(wage)">',   
    7.     '<tr><td>{name}</td>',   
    8.     '<td>{[this.format(values.wage)]}</td>',   
    9.     '</tpl></tpl>',   
    10.     '</table>',   
    11.     {   
    12.         //定义模板成员函数   
    13.         check : function(wage) {   
    14.             if(wage > 1000){   
    15.                 return true;   
    16.             }else {   
    17.                 return false  
    18.             }   
    19.         },   
    20.         //定义模板成员函数   
    21.         format : function(wage) {   
    22.             if(wage > 1300){   
    23.                 return '<font color=red>'+wage+'</font>';   
    24.             }else {   
    25.                 return '<font color=blue>'+wage+'</font>';   
    26.             }   
    27.                
    28.         }   
    29.     }   
    30. );   
    31. //定义模板数据，per表示发薪比例，wage表示标准工资   
    32. var tplData = [   
    33.         {name : '张三',wage : 1000},   
    34.         {name : '李四',wage : 1200},   
    35.         {name : '王五',wage : 900},   
    36.         {name : '赵六',wage : 1500}   
    37.     ]   
    38. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中   
    39. tpl.append('tpl-table',tplData);  
    //定义模板，在模板中使用模板成员函数
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0 class="title">',
	'<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tpl if="this.check(wage)">',
	'<tr><td>{name}</td>',
	'<td>{[this.format(values.wage)]}</td>',
	'</tpl></tpl>',
	'</table>',
	{
		//定义模板成员函数
		check : function(wage) {
			if(wage > 1000){
				return true;
			}else {
				return false
			}
		},
		//定义模板成员函数
		format : function(wage) {
			if(wage > 1300){
				return '<font color=red>'+wage+'</font>';
			}else {
				return '<font color=blue>'+wage+'</font>';
			}
			
		}
	}
);
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);



    12、在Extjs组件中使用模板

    Css代码 复制代码 收藏代码
    1. <style type="text/css">   
    2.     .even { background-color: #CCFFFF; }   
    3.     .odd { background-color: #FFFFFF; }   
    4. </style>  
    <style type="text/css">
	.even { background-color: #CCFFFF; }
	.odd { background-color: #FFFFFF; }
</style>
    Javascript代码 复制代码 收藏代码
    1. //定义组合框模板   
    2. var itemTpl = new Ext.XTemplate(   
    3.     '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',   
    4.     '{#} ：{[this.check(values)]}</div>',   
    5.     {   
    6.         check : function (values) {   
    7.             if(values.value > 2 ){   
    8.                 return "<font color=red>"+values.item+"</font>";   
    9.             }else {   
    10.                 return "<font color=blue>"+values.item+"</font>";   
    11.             }   
    12.         }   
    13.     }   
    14. );   
    15. //创建数据模型   
    16. Ext.regModel('ItemInfo', {   
    17.     fields: ['item','value']   
    18. });   
    19.   
    20. new Ext.form.Panel({   
    21.     title:'在Extjs组件中使用模板',   
    22.     renderTo: Ext.getBody(),   
    23.     bodyPadding: 5,   
    24.     height : 100,   
    25.     frame : true,   
    26.     width : 350,   
    27.     items : [{   
    28.         xtype : 'combo',   
    29.         fieldLabel:'邮政编码',   
    30.         displayField:'item',   
    31.         valueField:'value',   
    32.         labelSeparator :'：',//分隔符   
    33.         listConfig : {   
    34.             itemTpl : itemTpl   
    35.         },   
    36.         editable : false,   
    37.         queryMode: 'local',   
    38.         triggerAction: 'all',   
    39.         store : new Ext.data.Store({   
    40.             model : 'ItemInfo',   
    41.             fields: ['item','value'],   
    42.             data : [{item:'条目1',value:1},   
    43.                     {item:'条目2',value:2},   
    44.                     {item:'条目3',value:3},   
    45.                     {item:'条目4',value:4},   
    46.                     {item:'条目5',value:5},   
    47.                     {item:'条目6',value:6}]   
    48.         })   
    49.     }]   
    50. });  
    //定义组合框模板
var itemTpl = new Ext.XTemplate(
	'<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
	'{#} ：{[this.check(values)]}</div>',
	{
		check : function (values) {
			if(values.value > 2 ){
				return "<font color=red>"+values.item+"</font>";
			}else {
				return "<font color=blue>"+values.item+"</font>";
			}
		}
	}
);
//创建数据模型
Ext.regModel('ItemInfo', {
    fields: ['item','value']
});

new Ext.form.Panel({
	title:'在Extjs组件中使用模板',
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	height : 100,
	frame : true,
	width : 350,
	items : [{
		xtype : 'combo',
		fieldLabel:'邮政编码',
		displayField:'item',
		valueField:'value',
		labelSeparator :'：',//分隔符
		listConfig : {
			itemTpl : itemTpl
		},
		editable : false,
		queryMode: 'local',
		triggerAction: 'all',
		store : new Ext.data.Store({
			model : 'ItemInfo',
			fields: ['item','value'],
			data : [{item:'条目1',value:1},
			        {item:'条目2',value:2},
			        {item:'条目3',value:3},
			        {item:'条目4',value:4},
			        {item:'条目5',value:5},
			        {item:'条目6',value:6}]
		})
	}]
});



    13、Ext.view.View示例

    Javascript代码 复制代码 收藏代码
    1. var inputForm = Ext.create('Ext.form.Panel',{   
    2. bodyPadding: 5,   
    3. width : 490,   
    4. flex : 2,   
    5. fieldDefaults:{//统一设置表单字段默认属性   
    6.     labelSeparator :'：',//分隔符   
    7.     labelWidth : 60,//标签宽度   
    8.     width : 150,//字段宽度   
    9.     msgTarget : 'side',   
    10.     allowBlank : false,   
    11.     labelAlign : 'right'  
    12. },   
    13. layout: {//设置容器字段布局   
    14.     type: 'hbox',   
    15.     align: 'middle'//垂直居中   
    16. },   
    17. defaultType: 'textfield',//设置表单字段的默认类型   
    18. items:[{   
    19.     fieldLabel:'产品名称',   
    20.     name : 'productName'  
    21. },{   
    22.     fieldLabel:'数量',   
    23.     xtype : 'numberfield',   
    24.     name : 'productNum'  
    25. },{   
    26.     fieldLabel:'金额',   
    27.     xtype : 'numberfield',   
    28.     name : 'productPrice'  
    29. }],   
    30. fbar : [{   
    31.     text : '添加',   
    32.     handler : function(){   
    33.         if(inputForm.getForm().isValid()){   
    34.             var data = inputForm.getForm().getValues();   
    35.             var product = Ext.ModelMgr.create(data, 'ProductInfo');   
    36.                 productStore.add(product);   
    37.                 inputForm.getForm().reset();   
    38.             }   
    39.         }   
    40.     }]   
    41. });   
    42. //创建数据模型   
    43. Ext.regModel('ProductInfo', {   
    44. fields: ['productName','productNum','productPrice']   
    45. });   
    46. //创建产品数据源   
    47. var productStore = Ext.create('Ext.data.Store',{   
    48. autoLoad : true,   
    49. data : [],   
    50. model : 'ProductInfo',   
    51. proxy: {   
    52.     type: 'memory',   
    53.     reader: {   
    54.         type: 'json',   
    55.         root: 'datas'  
    56.         }   
    57.     }   
    58. });   
    59. //定义模板   
    60. var productTpl = new Ext.XTemplate(   
    61.     '<table border=1 cellspacing=0 cellpadding=0 width=100%>',   
    62. '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',   
    63. '<tpl for=".">',   
    64. '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',   
    65. '</tpl>',   
    66. '</table>'  
    67. );   
    68. //产品数据视图   
    69. var productView = Ext.create('Ext.view.View',{   
    70. store: productStore,   
    71. tpl: productTpl,   
    72. deferEmptyText : false,   
    73. itemSelector:'div.thumb-wrap',   
    74. emptyText: '请录入商品'  
    75. });   
    76. //产品面板   
    77. var productViewPanel = Ext.create('Ext.panel.Panel',{   
    78. autoScroll:true,   
    79. width : 490,   
    80. flex : 3,   
    81. layout : 'fit',   
    82. bodyStyle:'background-color:#FFFFFF',   
    83.     items: productView   
    84. });   
    85. Ext.create('Ext.panel.Panel',{   
    86. renderTo: document.body,   
    87. frame:true,   
    88. width : 500,   
    89. height: 200,   
    90. layout:'vbox',   
    91. title:'产品录入',   
    92.     items: [inputForm, productViewPanel]   
    93. });  
  • 相关阅读:
    nginx概念
    leetcode——109.有序链表转换二叉搜索树
    leetcode——95.不同的二叉搜索树II
    leetcode——106.从中序和后序遍历序列构造二叉树
    leetcode——117. 填充每个节点的下一个右侧节点指针 II
    leetcode——99.恢复二叉搜索树
    leetcode——103.二叉树的锯齿形层次遍历
    leetcode——107.二叉树的层次遍历II
    leetcode——79.单词搜索
    leetcode——37.解数独
  • 原文地址：https://www.cnblogs.com/luluping/p/2243771.html
Copyright © 2011-2022 走看看