版权声明:本文为博主原创文章,未经博主允许不得转载。 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);
});