例子: 在ViewPort.ui.js中有一个combo 控件初始化时,只能显示当前选中项,不能显示全部候选项。
1、按照网上google到的资料中显示,需要将triggerAction属性设置为"all",设置为"query",或者不设置都不能正常显示全部候选项。刚开始由于是静态绑定数据。设置triggerAction后该问题得到解决。如下:
item:[
{
xtype: 'combo',
id: "cbdomain",
x: 60,
y: 10,
width: 120,
editable: false,
store:[["telecom","telecom"],["animal","animal"]],
value:'telecom',
allowBlank: false,
enabled:false,
triggerAction: "all"
},{....}
]
2、后由于需求发生改变,需要从后台取数据,动态生成combo 的下拉选项。将store指给一个异步数据操作:getAllDomainstore。发现上述问题重新出现。又只能显示当前选中项了。 在网上反复查找没有找到相应解决方案。后自己实验发现,可通过设置displayField属性,使得该问题得到圆满解决。如下:
item:[
{
xtype: 'combo',
id: "cbdomain",
x: 60,
y: 10,
width: 120,
editable: false,
store:getAllDomainstore,
mode: 'remote',
valueFiled: 'domdesc',
displayField:'domdesc',
allowBlank: false,
enabled:false,
triggerAction: "all",
selectOnFocus : true,
forceSelection : true
},{.....}
]
可能由于Extjs 中的Combo 采用动态获取数据时,显示字段和值字段并不能事先确定下来。所以动态获取数据的combo必须严格设置displayFiled和valueField属性,否则会影响数据展示结果。
附:
一、数据操作 store 的定义。
文件:MainStore.js
如下:
var getAllDomainstore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'RetrieveData',
method:'POST'
}),
reader: new Ext.data.XmlReader
(
{
totalProperty: "pagecount",
record: 'domain'
},
[
{name:"id",type:'int'},
{name:"domdesc"}
]
)
});
getAllDomainstore.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
webAction:'getAllDomains',
username:Ext.ComponentMgr.get('cusername').getValue(),
domain: 'telecom'
});
});
getAllDomainstore.on('load',onstoreStoreLoad, getAllDomainstore, true);
function onstoreStoreLoad()
{
if (getAllDomainstore.getCount() > 0)
{
// 一点小插曲:动态获取的数据中总会有一个空白记录,有时候空白记录并不是必要的,但是我没有找到清除空白记录的设置,还好无论查询情况如何,这条空白记录总是第一条记录(index = 0)
// 于是我在每次load的时候,将这条记录强行删除了,如下:
getAllDomainstore.remove(getAllDomainstore.getAt(0));
Ext.ComponentMgr.get("cbdomain").setValue('telecom');
Ext.ComponentMgr.get("cbdomian_deploy").setValue('telecom');
Ext.ComponentMgr.get("cbdomain3").setValue('telecom');
Ext.ComponentMgr.get("cbdomain5").setValue('telecom');
Ext.ComponentMgr.get("cbdomain6").setValue('telecom');
Ext.ComponentMgr.get("cbdomain_MF_TraingCase").setValue('telecom');
}
}
二、载入的时机:
载入数据:登录成功后。
文件: ModalForm.js
如下:
Ext.Ajax.request({
url : 'Login',
method: 'POST',
params:{
webAction:'login',
username: curusername, //Ext.ComponentMgr.get('username').getValue(),
password: ''
},
success: function(response) {
getAllDomainstore.load({
params:{
webAction:'getAllDomains',
username:Ext.ComponentMgr.get('cusername').getValue(),
domain:"telecom"
}
});
});
分享到:
相关推荐
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
NULL 博文链接:https://init-since.iteye.com/blog/2095766
extjs时间空间精确秒
extjs控件,是本科的毕业设计,最后获得优秀,老师评价非常好。主要有图表控件、一级、二级、三级联动下拉列表框控件
Extjs 下拉列表
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
extjs 时间控件
下拉框中要添加一项 ’所有‘ ,由于是combox无法使用option
自己新写的extjs年份控件,直接new Ext.ux.MyYear 即可使用
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
ExtJs图片按钮控件:设置文字、文字颜色、背景图片、是否可用
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目