Combox
Ext.form.Combox
问题1、实现Combox下拉列表的悬浮提示
方法:
1).开启Ext的提示功能,Ext.QuickTips.init();
2).var tpl = new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item" ext:qtitle=""
ext:qtip="{attrName}">{attrName:ellipsis(20)}</div></tpl>');
在Combox的tpl属性中加入 即tpl : tpl 这样就有效果了
特别注意:{attrName} 中的attrName是要悬浮提示的内容 ellipsis(20) 设置文本的现实长度
问题2、如何在Combox的下拉框中加入滚动条,以显示出长文本
方法:
1).加入展开时的事件驱动
tagFeature.on("expand",function(){
this.innerList.dom.style.overflowX="auto"; //改变横向overflow的样式,显示横向的滚动条
});
tagFeature 表示Combox 前文:var tagFeature = new Ext.form.Combox();
Example :-- begin
var tagFeature = new Ext.form.ComboBox({
id : "tagFeatureId", // Combox的id
hiddenName : "tagFeature",
fieldLabel : "标签特征",
emptyText : ' ',
valueField : 'attrCode', // 值字段 与fields : ['attrCode', 'attrName'],对应
displayField : 'attrName', //展示字段 与fields : ['attrCode', 'attrName']对应
typeAhead : true, //值为true时在经过指定延迟(typeAheadDelay)后弹出并自动选择输入的文本 默认为false
mode : 'local',
width : 135,
//listWidth : 500,
//tpl : tpl,
triggerAction : 'all',
selectOnFocus : true,
editable : false, // 是否可编辑
store : new Ext.data.JsonStore({
url : 'userTagSearch.do?action=queryTagFeature',
fields : ['attrCode', 'attrName'],
autoLoad : true,
root : 'records',
listeners : {
load : function(store, records, options) {
Ext.getCmp('tagFeatureId').setValue('');
}
}
})
});
tagFeature.on("expand",function(){
this.innerList.dom.style.overflowX="auto"; //改变横向overflow的样式,显示横向的滚动条
});
-- end
问题3、设置Combox的默认值
方法:
一般是在数据加载时设置默认值,当然也可以在加载后设置
加载时设置:
在 store的配置项中
store : new Ext.data.JsonStore({
url : 'userTagSearch.do?action=queryTagFeature',
fields : ['attrCode', 'attrName'],
autoLoad : true,
root : 'records',
listeners : {
<!--------- 在这里 begin -------->
load : function(store, records, options) {
Ext.getCmp('tagFeatureId').setValue(''); // 这里的setValue(id) id为valueField对应的值
}
<!--------- 在这里 end -------->
}
}),
加载后在外部设置:
Ext.getCmp('labelPageId').store.reload(); -- 让Combox的store重新load,即reload()
Ext.getCmp('labelPageId').store.on('load',function(){ -- 绑定load事件,触发function()
Ext.getCmp('labelPageId').setValue(comboDefaultValue);
});