如何用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,从而添加新的数据。