预览:
![](http://clip2net.com/clip/m4134/1211600597-clip-1kb.png)
调用方法:
<INPUT TYPE="" NAME="" id='multiselect'>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.onReady(function()
{
![](/Images/OutliningIndicators/InBlock.gif)
var arr = [['1', '项一'], ['2', '项二'], ['3', '项三'],['4', '项四'],['5', '项五']];
var arr2 = [['1', '项一'], ['2', '项二']];
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var auto_field = new Ext.form.MultiSelectField(
{
applyTo:'multiselect',
hiddenName:'hid', //Ext.get('hid').getValue() 可以得到索引号ID数组
contextArray : arr,
fieldLabel : 'adfadsf',
id : 'test',
defaltValueArray:arr2,
name : 'test'
});
![](/Images/OutliningIndicators/InBlock.gif)
});
</script>EXT扩展组件:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField,
{
readOnly : true,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
defaultAutoCreate :
{
tag : "input",
type : "text",
size : "24",
autocomplete : "off"
},
displayField : 'text',
contextArray : undefined,
valueField : undefined,
hiddenName : undefined,
listWidth : undefined,
minListWidth : 50,
defaltValueArray:undefined,
layerHeight : undefined,
minLayerHeight : 60,
value : undefined,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
baseParams :
{},
checkpanel : undefined,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initComponent : function()
{
Ext.form.MultiSelectField.superclass.initComponent.call(this);
this.addEvents('select', 'expand', 'collapse', 'beforeselect');
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.transform)
{
this.allowDomMove = false;
var s = Ext.getDom(this.transform);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!this.hiddenName)
{
this.hiddenName = s.name;
}
s.name = Ext.id();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!this.lazyRender)
{
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate
|| this.defaultAutoCreate);
Ext.removeNode(s);
this.render(this.el.parentNode);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
Ext.removeNode(s);
}
![](/Images/OutliningIndicators/InBlock.gif)
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onRender : function(ct, position)
{
Ext.form.MultiSelectField.superclass.onRender.call(this, ct, position);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.hiddenName)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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');
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Ext.isGecko)
{
this.el.dom.setAttribute('autocomplete', 'off');
}
this.initList();
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initList : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!this.list)
{
var cls = 'x-multiselectfield-list';
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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');
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.innerList = this.list.createChild(
{
cls : cls + '-inner'
});
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.innerList.setHeight(this.layerHeight || this.minLayerHeight);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!this.checkpanel)
{
this.checkpanel = this.CheckPanel(this.innerList);
}
this.checkpanel.render();
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onSelect : function(id, text, checked)
{
this.setValue(id, text, checked);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
CheckPanel : function(el)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var checkpanel = new Ext.Panel(
{
el : el,
autoScroll : true
});
var multiselectField = this;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (typeof this.contextArray != 'undefined')
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < this.contextArray.length; i++)
{
var contArry = this.contextArray[i];
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var auto_field = new Ext.form.Checkbox(
{
boxLabel : contArry[1],
id : contArry[0],
name : contArry[0],
cls : 'x-multiselectfield-list'
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
auto_field.on('check', function(auto_field)
{
multiselectField.onSelect(auto_field.id,auto_field.boxLabel, auto_field.checked);
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof this.defaltValueArray != 'undefined')
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var j = 0; j < this.defaltValueArray.length; j++)
{
var defvalArry = this.defaltValueArray[j];
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(defvalArry[0]==contArry[0])
{
auto_field.checked=true;
}
}
}
![](/Images/OutliningIndicators/InBlock.gif)
checkpanel.add(auto_field);
}
}
return checkpanel
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getValue : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (typeof this.value != 'undefined')
{
return this.value;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
return Ext.form.MultiSelectField.superclass.getValue.call(this);
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
setValue : function(id, text, ischecked)
{
var text = text;
var value = id;
var return_text_string;
var return_value_string;
![](/Images/OutliningIndicators/InBlock.gif)
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)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
text_arrtemp.push(text);
ID_arrtemp.push(value);
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
text_arrtemp.remove(text);
ID_arrtemp.remove(value);
}
![](/Images/OutliningIndicators/InBlock.gif)
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);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (first_text_str == ",")
{
return_text_string = return_text_string.substr(1);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.hiddenField)
{
this.hiddenField.value = return_value_string;
}
![](/Images/OutliningIndicators/InBlock.gif)
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onDestroy : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.list)
{
this.list.destroy();
}
Ext.form.MultiSelectField.superclass.onDestroy.call(this);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
collapseIf : function(e)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!e.within(this.wrap) && !e.within(this.list))
{
this.collapse();
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
expand : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
collapse : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
isExpanded : function()
{
return this.list && this.list.isVisible();
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onTriggerClick : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.disabled)
{
return;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.isExpanded())
{
this.collapse();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.onFocus(
{});
this.expand();
}
this.el.focus();
}
});
Ext.reg('multiselectfield', Ext.form.MultiSelectField);
Array.prototype.remove=function(str)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
var tmp=this;
for(i=0;i<tmp.length;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tmp[i].toString()==str)
{
tmp.splice(i,1);
break;
}
}
}
posted @
2008-05-24 11:44
meetrice
阅读(
4602)
评论()
编辑
收藏
举报