EXT2.0 多选下拉框

预览:


调用方法:

<INPUT TYPE="" NAME="" id='multiselect'>
<script>
Ext.onReady(
function() {

    
var arr = [['1''项一'], ['2''项二'], ['3''项三'],['4''项四'],['5''项五']];
    
var arr2 = [['1''项一'], ['2''项二']];


    
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'
    }
);

}
);
</script>

EXT扩展组件:

Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField, {
    readOnly : 
true,
    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,
    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 < this.contextArray.length; 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);
                }
);

                
if(typeof this.defaltValueArray != 'undefined'){
                    
for (var j = 0; j < this.defaltValueArray.length; j++{
                        
var defvalArry =  this.defaltValueArray[j];

                        
if(defvalArry[0]==contArry[0]){
                            auto_field.checked
=true;
                        }

                    }

                }


                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)   
        
{         
           text_arrtemp.push(text); 
            ID_arrtemp.push(value);
        }
   
        
else  
        
{   
            text_arrtemp.remove(text);
            ID_arrtemp.remove(value);
        }
   

        return_text_string 
= text_arrtemp.toString();
        return_value_string 
= ID_arrtemp.toString();
        
var first_text_str = return_text_string.substr(01);
        
var first_value_str = return_value_string.substr(01);
        
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);
Array.prototype.remove
=function(str)
{
    
var tmp=this;
    
for(i=0;i<tmp.length;i++)
    
{
        
if(tmp[i].toString()==str){
            tmp.splice(i,
1);
            
break;
        }

    }

}
 
posted @ 2008-05-24 11:44 meetrice 阅读(...) 评论(...) 编辑 收藏