|
锁定老帖子 主题：ext-2.0扩展多选下拉框(代码及演示)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-01-25
为感谢论坛发布
http://blog.csdn.net/edisundong/archive/2008/01/25/2065379.aspx 说明： 感谢飞天色鼠和javaeye论坛的sp2，其实是改了飞天色鼠的代码。sp2给了很大帮助，感谢！ 演示效果： 
调用代码如下： var auto_field=new Ext.form.MultiSelectField(); if(contextlist==null) { auto_field.contextArray= [ ['1','一'], ['2','二'], ['3','三'] ] } else { auto_field.contextArray=contextlist; } auto_field.fieldLabel=text; auto_field.id=id; auto_field.name=id; return auto_field; 代码如下：
Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField, {
readOnly : true ,
defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
displayField : 'text',
contextArray: undefined, //必须满足每行至少两列,第一、二列分别为[value,text]
valueField : undefined,
hiddenName : undefined,
listWidth : undefined,
minListWidth : 50,
layerHeight : undefined,
minLayerHeight : 60,
value : undefined,
baseParams : {},
checkpanel:undefined,
initComponent : function()
{
Ext.form.MultiSelectField.superclass.initComponent.call(this);
this.addEvents
(
'select',
'expand',
'collapse',
'beforeselect'
);
if(this.transform)
{
this.allowDomMove = false;
var s = Ext.getDom(this.transform);
if(!this.hiddenName)
{
this.hiddenName = s.name;
}
s.name = Ext.id();
if(!this.lazyRender)
{
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
Ext.removeNode(s);
this.render(this.el.parentNode);
}else{
Ext.removeNode(s);
}
}
},
onRender : function(ct, position)
{
Ext.form.MultiSelectField.superclass.onRender.call(this, ct, position);
if(this.hiddenName)
{
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
'before', true);
this.hiddenField.value =
this.hiddenValue !== undefined ? this.hiddenValue :
this.value !== undefined ? this.value : '';
this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}
this.initList();
},
initList : function()
{
if(!this.list)
{
var cls = 'x-multiselectfield-list';
this.list = new Ext.Layer
({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.innerList.setHeight(this.layerHeight || this.minLayerHeight);
if(!this.checkpanel)
{
this.checkpanel = this.CheckPanel(this.innerList);
}
this.checkpanel.render();
}
},
onSelect:function(id,text,checked)
{
this.setValue(id,text,checked);
},
CheckPanel:function(el)
{
var checkpanel = new Ext.Panel
({
el:el,
autoScroll:true
});
var multiselectField = this;
if(typeof this.contextArray != 'undefined')
{
for(var i=0;i {
var contArry=this.contextArray[i];
var auto_field=new Ext.form.Checkbox
({
boxLabel:contArry[1],
id:contArry[0],
name:contArry[0],
cls :'x-multiselectfield-list'
});
auto_field.on('check',function(auto_field)
{
multiselectField.onSelect(auto_field.id,auto_field.boxLabel,auto_field.checked);
});
checkpanel.add(auto_field);
}
}
return checkpanel
},
getValue : function()
{
if(typeof this.value != 'undefined')
{
return this.value;
}
else
{
return Ext.form.MultiSelectField.superclass.getValue.call(this);
}
},
setValue : function(id,text,ischecked)
{
var text = text;
var value = id;
var return_text_string;
var return_value_string;
var text_temp = Ext.form.MultiSelectField.superclass.getValue.call(this);
var ids_temp = typeof this.value != 'undefined' ? this.value : '';
var text_arrtemp = text_temp.split(",");
var ID_arrtemp = ids_temp.split(",");
if(ischecked)
{
Array.add(text_arrtemp,text);
Array.add(ID_arrtemp,value);
}
else
{
Array.remove(text_arrtemp,text);
Array.remove(ID_arrtemp,value);
}
return_text_string = text_arrtemp.toString();
return_value_string = ID_arrtemp.toString();
var first_text_str = return_text_string.substr(0,1);
var first_value_str = return_value_string.substr(0,1);
if(first_text_str==",")
{
return_text_string=return_text_string.substr(1);
}
if(first_value_str==",")
{
return_value_string=return_value_string.substr(1);
}
Ext.form.MultiSelectField.superclass.setValue.call(this, return_text_string);
this.value = return_value_string;
if(this.hiddenField)
{
this.hiddenField.value = return_value_string;
}
},
onDestroy : function()
{
if(this.list)
{
this.list.destroy();
}
Ext.form.MultiSelectField.superclass.onDestroy.call(this);
},
collapseIf : function(e)
{
if(!e.within(this.wrap) && !e.within(this.list))
{
this.collapse();
}
},
expand : function()
{
if(this.isExpanded() || !this.hasFocus)
{
return;
}
this.list.alignTo(this.wrap, this.listAlign);
this.list.show();
Ext.getDoc().on('mousewheel', this.collapseIf, this);
Ext.getDoc().on('mousedown', this.collapseIf, this);
this.fireEvent('expand', this);
},
collapse : function()
{
if(!this.isExpanded())
{
return;
}
this.list.hide();
Ext.getDoc().un('mousewheel', this.collapseIf, this);
Ext.getDoc().un('mousedown', this.collapseIf, this);
this.fireEvent('collapse', this);
},
isExpanded : function()
{
return this.list && this.list.isVisible();
},
onTriggerClick : function()
{
if(this.disabled)
{
return;
}
if(this.isExpanded())
{
this.collapse();
}
else
{
this.onFocus({});
this.expand();
}
this.el.focus();
}
});
Ext.reg('multiselectfield', Ext.form.MultiSelectField);
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-01-25
感谢分享。
我有一个问题： 我使用DWR返回json数据串，但是不知道如何让Ext.tree一次性loader返回的川。 希望能够获得您的指点。 |
| 返回顶楼 | |
|
发表时间：2008-01-26
实在不好意思，我是.net阵营的，dwr我没有接触过，你的意思是不是点击下拉框的时候lazy load？？我也正在考虑lazy load的问题，不过最近太忙，而且其实这个控件有个bug，目前正在修复
|
| 返回顶楼 | |
|
发表时间：2008-01-28
98行代码有误，编辑器的原因？
|
| 返回顶楼 | |
|
发表时间：2008-01-28
一个下拉框就这么麻烦，还大叫EXT有多牛？
晕。。。 无语。。。 |
| 返回顶楼 | |
|
发表时间：2008-01-28
项目刚好需要这个多选下拉框,谢谢楼主,如果能够控制一下鼠标移到选项的效果,像Combo一样,那就完美了。
|
| 返回顶楼 | |
|
发表时间：2008-01-31
调用代码是不是省略了阿
|
| 返回顶楼 | |
|
发表时间：2008-04-22
为什么第98行出错？
|
| 返回顶楼 | |
|
发表时间：2008-12-25
98行少了一部分代码哦
|
| 返回顶楼 | |
|
发表时间：2009-01-11
这个组件怎么在ext2.2下面,选择框怎么没有出现
|
| 返回顶楼 | |
