Extjs之旅-combox之远程加载数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/example.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){

//创建数据模型
 Ext.regModel('postInfo',{
	 fields:[{name:'name'},{name:'areaid'}]
 });
 
 //定义组合框中显示的数据源
 var postStore = Ext.create('Ext.data.Store',{
	 model:'postInfo',
	 proxy:{
		 type:'ajax',
		 url:'areaAction!list.action',
		 data:'list'
	 }
 });
 //创建表单
 Ext.create('Ext.form.Panel',{
	 title:'Ext.form.ComboBox远程数据源演示',
	 renderTo:Ext.getBody(),
	 bodyPadding:5,
	 frame:true,
	 height:100,
	 width:270,
	 defaults:{
		 labelSeparator:': ',
		 labelWidth:70,
		 width:200,
		 labelAlign:'left'
		 
	 },
	 items:[{
		 xtype:'combo',
		 listConfig:{
			 emptyText:'未找到匹配值',
			 maxHeight:180
		},
		 allQuery:'allArea',
		 minChars:1,//下拉框自动选择前用户需要输入的最小字符数量
         queryDelay:300,//查询延迟时间（毫秒）		 
		 name:'area',
		 fieldLabel:'省',
		 triggerAction:'all',//单击按钮显示全部数据
		 store:postStore,
		 displayField:'name',//定义要显示的字段
		 valueField:'areaid',
		 queryMode:'remote',//远程模式
		 forceSelection:true,//要求输入值必须在列表中存在
		 typeAhead:true,//允许自动选择匹配的剩余部分文本
		 value:'11'//默认值
	 }]
 });
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>

@Entity
@Table(name="area")
public class Area {

    @Id
    private Integer areaid;
    /**
     * @return the areaid
     */
    public Integer getAreaid() {
        return areaid;
    }
    /**
     * @param areaid the areaid to set
     */
    public void setAreaid(Integer areaid) {
        this.areaid = areaid;
    }
    /**
     * @return the name
     */
    public String getName() {
        return name;
    }
    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }
    /**
     * @return the parentid
     */
    public Integer getParentid() {
        return parentid;
    }
    /**
     * @param parentid the parentid to set
     */
    public void setParentid(Integer parentid) {
        this.parentid = parentid;
    }
    /**
     * @return the vieworder
     */
    public String getVieworder() {
        return vieworder;
    }
    /**
     * @param vieworder the vieworder to set
     */
    public void setVieworder(String vieworder) {
        this.vieworder = vieworder;
    }
    private String name;
    private Integer parentid;
    private String vieworder;
}

    public String list(){
        areas=areaService.findAll("from Area a where a.parentid=0  ",query);
        return "list";
 }

query未查询参数，当用户输入一个字符时会进行相应的模糊查询

Extjs之旅-combox之远程加载数据
最后附上一个中国区域表

Extjs之旅-combox之远程加载数据

相关推荐