combobox学习笔记
一，重要属性
fieldLabel: 框名,所在的面板必须是layout:'form'才能显现
hiddenName:'snCompare', //真正提交时此combo的Name
triggerAction:'all', //默认为query，每次下列均显示全部显示，而不是部分
editable:false, //不可编辑
valueField:'value', //value字段,通过hiddenName来传递
displayField:'text', //显示文本字段
mode:'local', //本地加载，才能加载数据 'remote'远程加载
store:new Ext.data.SimpleStore({ //存储静态数据的写法
data:[['like', '相似'],
['nequal', '不等于'],
['eq', '等于']],
fields:['value','text'] }) //字段与上面对应
二，
例子一，
//combobox_01.js页面
Ext.onReady(function(){
var formStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'comboboxform_01.jsp'}),
reader:new Ext.data.JsonReader({root:'root'},['value','text'])
});
formStore.load();
var formCombo = new Ext.form.ComboBox({
hiddenName:'comboboxtest',
store:formStore,
valueField:'value',
displayField:'text',
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'请选择表单名',
selectOnFocus:true,
renderTo:Ext.getBody() //若渲染在其他表单中就可以不用写
});
});
//上述js可以改造成远程的
//注释掉 formStore.load()和 mode:'local'，而将mode:'local'改为 mode:'remote'
//comboboxform_01.jsp页面
<html>
<body>
<%
String data="{root:[{value:'value123',text:'text123'}]}"; //value和text可以有引号
try{
response.getWriter().write(data);
response.getWriter().close();
}catch(Exception e){
e.printStackTrace();
}
%>
</body>
</html>
例子二
对上述例子一的改造
json数据可以这样写
String json= "[{vale:'value123',text:'text123'},{},{}]";
这样解析数据就可以写成与它对应的格式
reader:new Ext.data.JsonReader({},['value','text']) //注意是二维的
//combobox_02.js页面
Ext.onReady(function(){
var formStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'comboboxform_02.jsp'}),
reader:new Ext.data.JsonReader({},['value','text'])
});
var formCombo = new Ext.form.ComboBox({
store:formStore,
hiddenName:'combotest',
valueField:'value',
displayField:'text',
typeAhead:true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择表单名',
selectOnFocus:true,
renderTo:Ext.getBody() //若渲染在其他表单中就可以不用写
});
});
//comboboxform_02.jsp页面
<html>
<body>
<%
String data="[{value:'value123',text:'text123'}]"; //value和text可以有引号
try{
response.getWriter().write(data);
response.getWriter().close();
}catch(Exception e){
e.printStackTrace();
}
%>
</body>
</html>
例子三，当combobox作为容器的一个元件时的写法如下
此时就没有renderTo，而且在编写js的页面时，此时的js相对地址就是在调用该js的页面地址，所以url的编写地址要注意，在哪个层面上调用
//js页面
new Ext.form.ComboBox({
mode:'remote',triggerAction:'all',
valueField:'value',displayField:'text',
hiddenName:'sourceCompare',
store:new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'../test/test.jsp'}),
reader:new Ext.data.JsonReader({},['value','text'])
})
});
//url的相对于位置是与调用该js的页面为参照物，个人见解
//json数据返回页面
<html>
<body>
<%
String data="[{'value':'value123','text':'text123'}]"; //value,text双引号可以省略掉
try{
response.getWriter().write(data);
response.getWriter().close();
}catch(Exception e){
e.printStackTrace();
}
%>
</body>
</html>
注意：
调用后，传递的是value数据，而不是text数据，所以有时采用取巧的方法，将value和text的取值一样