Ext3.1.1(五)XTemplate使用案例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/57086756



Ext.onReady(function(){
			var myreader = new Ext.data.JsonReader({
				//root值为 jsonarray 代表ext组件数据来源
				root : 'body.content',
				//总记录数从哪个字段取
				totalProperty : 'body.total',
				//哪个字段是id
				idProperty : "id"
			}, [
			    {name:"id",type:"int"},
			    {name:"username",type:"string"}
			]);
			
			var mystore = new Ext.data.Store({
				id : 'mystore',
				//通过Ext.Ajax.request发送请求
				proxy : new Ext.data.HttpProxy({
					url : getRootPath()+'/container/findPageByThis' + '?named=container_page',
					method : 'post',
					jsonData : {
						page : 1,
						rows : 30
					},
					headers : {
						'Content-Type' : 'application/json; charset=UTF-8'
					}
				}),
				reader : myreader
			});
			
			//<tpl for=".">标签内的html将被循环输出,类似于foreach,循环次数与store数据条目数相关
			var resultTpl = new Ext.XTemplate(
		        '<tpl for="."><div class="search-item">',
		            '<span>{username}</span>',
		        '</div></tpl>'
		    );
			
			var mywin = new Ext.Window({  
				id : 'mywin',
				title : 'Window',
				modal: true,
				width: 280,
		        height:185,
				closeAction : 'close',
				maximizable : false,
				items : [new Ext.FormPanel({
					id:'myform',
					autoWidth : true,
					autoHeight:true, 
					frame : true,
					labelWidth : 65, 
					labelAlign : "right",
					items:[
					{ 
					    xtype : 'combo',
					    id:'userName',  
					    fieldLabel : "用户名",
					    store: mystore,
					    hideTrigger:true,
					    typeAhead: false,
					    loadingText: '查找...',
					    minChars:1,
					    pageSize:10,
					    queryParam:'num',
					    tpl: resultTpl,
					    triggerAction: 'all',
					    selectOnFocus:true, 
					    width:170,
					    value:'..',
					    //指定哪个html节点作为选择器,这里指的是div下class是search-item的节点
					    //只有指定了这个属性,onSelect才生效
					    itemSelector: 'div.search-item',
					    //readOnly:true, 
				        onSelect: function(record){
				        	var combo = Ext.getCmp("userName"); 
				        	combo.setValue(record.data.username);
				        	combo.collapse();
				        }, 
				        listeners : {
				            'beforequery':function(e){
				            	 var combo = e.combo;  
				                 if(!e.forceAll){  
				                     var input = e.query; 
				                     var json = {
			                    		 page : 1,
				    					 rows : 30,
				                     };
				                     json[':userName'] = '%' + input + '%';
				                     combo.store.proxy.conn.jsonData = json;
				                 }
				            }
				        } 
					}]
				})]
			});
			mywin.show();
			
			
			
			var mypanel = new Ext.Panel({
				title:"使用xtemplate填充",
				renderTo:"mypanel",
				shadow : true,
				frame:true,
				bodyStyle:'background:#E4E4E4;',
				width: 500,
				height : 200,
				border : true,
			});
			
			//数据源 
	        var data = { 
	            name: 'xxxxxxxxx', 
	            read: [{ 
	                book: '---JSP', 
	                date: '2007-7-7' 
	            }, { 
	                book: 'java 入门', 
	                date: '2006-6-6' 
	            }] 
	        }; 
			
	        //创建模板 
	        //{#} 代表循环的序号 <tpl if=""></tpl> 表示条件判断
	        var tp1 = new Ext.XTemplate( 
	            '<table width="100%" cellpadding="0" cellspacing="0">',
	            '<tr><td>编号</td><td>书名</td><td>日期</td></tr>', 
	            '<span style="color: rgb(255, 0, 0);"><tpl for="read">',
	            '</span>',
	            '<tr>', 
	            '<span style="color: rgb(255, 0, 0);">',
	            '<td>{#}<tpl if="xindex >= 1">x</tpl></td><td>{book}</td><td>{date}</td></tr>',
	            '</span>', 
	            '<span style="color: rgb(255, 0, 0);"></tpl></table></span>'
	        ); 
	         
	        //将模板数据渲染到panel的body上
	        tp1.overwrite(mypanel.body, data); 
			
			
		});


猜你喜欢

转载自blog.csdn.net/qwkxq/article/details/57086756