GWT的自动提示下拉框

如何用Gxt来做一个简单的自动完成下拉框呢？这里涉及到4个类：

 

ComboBox   下拉框对象

ListStore     下拉框的数据源

ListLoader   数据源的loader

RpcProxy     Rpc代理对象，用于和服务器进行交互

 

请看下面的代码示例：

 

RpcProxy<List<Jizhan>> proxy = new RpcProxy<List<Jizhan>>() {
			
			@Override
			protected void load(Object loadConfig, AsyncCallback<List<Jizhan>> callback) {
				
				LoadConfig lc = (LoadConfig) loadConfig;
				String name = lc.get("query");
				
				Jizhan jizhan = new Jizhan();
				jizhan.setName(name);
				jizhan.setArea(GlobalVariable.getUser().getArea().getName());
				
				ServiceContext.dingweiQuerySvc.selectJizhanByLikeNameAndArea(jizhan, callback);
			}
		};
		
		ListLoader<ListLoadResult<Jizhan>> loader = new BaseListLoader<ListLoadResult<Jizhan>>(proxy);
		
		ListStore<Jizhan> store = new ListStore<Jizhan>(loader);
		
		ComboBox<Jizhan> cbo = new ComboBox<Jizhan>();
		cbo.setStore(store);
		cbo.setFieldLabel("基站名称");
		cbo.setLoadingText("查询中...");
		cbo.setDisplayField("name");
		cbo.setMinChars(2);
		cbo.setHideTrigger(true);
		cbo.setItemSelector("div.search-item");
		cbo.setTemplate("<tpl for=\".\"><div class=\"search-item\">{name}</div></tpl>");

 

.search-item {
	padding: 3px 10px 3px 10px;
	border: 1px solid #fff;
	border-bottom: 1px solid #eeeeee;
	white-space: normal;
	color: #555;
}

 

 

这里讲解下执行原理。

1. 在下拉框中敲下2个及以上字符，触发loader的load方法。

2. loader使用proxy来加载数据。

3. proxy被执行，service方法被调用，和服务器进行交互。

4. RpcProxy返回数据加载进loader，触发loader的load event

5. store监听loader的event，从而添加新的数据。

 

评论

1 楼 administrator1616 2012-09-04  

哥，你的文章能说明白点么，汗