extjs下拉多選框

⑴ 怎麼把用Ext生成多選下拉框

使用：lovcombo 多選下拉框 ，EXTjs的擴展控制項。

可網路搜索下載， LovCombo.js 和樣式表LovCombo.css （css可能不需要 ）
使用方法：使用 xtype:'lovcombo' 其他屬性和combo一樣的。
jsp引用
<link rel="stylesheet" type="text/css" href="../resources/css/Ext.ux.form.LovCombo.css" />
<script type="text/javascript" src='../jslib/Ext.ux.form.LovCombo.js'></script>

找不到網路HI聯系，發給你。

⑵ extjs下拉列表選擇框combobox，數據源重新載入後如何設置默認選中的項

我建議你在url 中增加部分參數,js存儲選中ids,並傳遞默認選中的數據,後台根據 選中狀況以及關鍵字排序,在代碼中根據傳遞的選中值,進行屬性修改.

⑶ extjs怎麼做成下拉框，畫紅框的那裡變成下拉框，下面有之前不是下拉框的部分代碼，請跟為大神幫幫忙

改成用combobox組件就可以

⑷ extjs 下拉框多選

//配置時設置多選多true即可

Ext.create('Ext.form.ComboBox',{
multiSelect:true
});

⑸ 用extjs技術怎麼在行中嵌入下拉列表框

首先grid的是new
Ext.grid.EditorGridPanel可編輯的列表。這里可以配置參數單擊或雙擊編輯所在行，具體的見api。
然後是這里new
Ext.grid.ColumnModel([
需要嵌入下拉列表框的察遲列這樣定義就哦了
{header
:
"合同狀態",width
:
100,sortable
:
true,align
:
"center",dataIndex
:
"state"
,editor
:
new
Ext.form.ComboBox({//編輯的時候變成下拉框。
triggerAction
:
"坦段all",
width
:
120,
editable:
false,
store
:
["建立讓沒譽","執行","作廢","完結"],
resizable
:
true,
mode
:
'local',
lazyRender
:
true
})
}

⑹ Extjs怎麼實現下拉框多選

1、擴展js類庫，在項目中建立一個 js文件，命名為:xxx.js 其代碼為

if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}

Ext.ns('Ext.form');

Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}

Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);

this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});

this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},

clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);

returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;

Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));

if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}

if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}

this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);

2、在ext-all.css文件最後，加入css樣式

.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}

3、使用

varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//讀取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});

varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--請選擇--',
allowBlank:false,
blankText:'請選擇',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});

DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全選
});

DepartUserStore.load();

⑺ extjs中下拉框選擇一項另外一項下拉框顯示默認值（選擇下拉框中的A1，另一下拉框自動選擇B1）

$('#fId').combobox({
valueField: 'id',
textField: 'name',
editable:false,
panelHeight:'auto',
url : ctx+'mole/list.do',
onSelect : function(rec){
$('#pid').combotree('clear');
var url = ctx+'menu/mole/'+rec.id+'.do';
$('#pId').combotree('reload', url);
},
onLoadSuccess : function (data){

},
onLoadError : function(data){
$.messager.alert('提示','載入數據失敗!','info');
}
});
以上是esayui中的下拉框 級聯的代碼示例
$('#pid').combotree('clear');
var url = ctx+'menu/mole/'+rec.id+'.do';
$('#pId').combotree('reload', url);
在上級選中後 把下級選擇框內容清楚 在重新根據上級的id去載入即可

⑻ extjs 多選下拉框

用lvcombo插件就行了（地址：://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo-1.0.zip&id=1&pagename=FILE:%20download/lovcombo/lovcombo-1.0.zip）
教程：
{
xtype : 'lovcombo',
name : 'roles',
fieldLabel : 'Roles',
store : lvComboStore,
valueField : 'name',
displayField : 'name',
mode : 'local',
editable : true,
triggerAction : 'all'
}

⑼ ExtJS grid表頭如何增加下拉項

extjs自己提供復選框列

//checkbox列

varfilecheckbox=newExt.grid.CheckboxSelectionModel();

//GridPanel

varfileGrid=newExt.grid.GridPanel({

store:fileStore,

columns:[

newExt.grid.RowNumberer(),//顯示列數

filecheckbox,//顯示復選框列

{//其他顯示列}]

//省略其他屬性

});

這樣你就可以而得到一個復選框，可以進行單選、全選了

如果你想自己定義的話，也可以

//定義filters

varfilters=newExt.ux.grid.GridFilters({

//

encode:encode,//jsonencodethefilterquery

local:local,//defaultstofalse(remotefiltering)

filters:[{

type:'numeric',

dataIndex:'id'

},{

type:'string',

dataIndex:'company',

disabled:true

},{

type:'numeric',

dataIndex:'price'

},{

type:'date',

dataIndex:'date'

},{

type:'list',

dataIndex:'size',

options:['small','medium','large','extralarge'],

phpMode:true

},{

type:'boolean',

dataIndex:'visible'

}]

});

//

//

//thefiltertypes(

varcreateColModel=function(finish,start){

varcolumns=[{

dataIndex:'id',

header:'Id',

//=true

//tousestore'sfield'stypeproperty(iftypepropertynot

//'auto'which

//GridFilterswillassumetobe'StringFilter'

filterable:true

//,filter:{type:'numeric'}

},{

dataIndex:'company',

header:'Company',

id:'company',

filter:{

type:'string'

//

//,disabled:true

}

},{

dataIndex:'price',

header:'Price',

filter:{

//type:'numeric'//

}

},{

dataIndex:'size',

header:'Size',

filter:{

type:'list',

options:['small','medium','large','extralarge']

//,phpMode:true

}

},{

dataIndex:'date',

header:'Date',

renderer:Ext.util.Format.dateRenderer('m/d/Y'),

filter:{

//type:'date'//

}

},{

dataIndex:'visible',

header:'Visible',

filter:{

//type:'boolean'//

}

}];

returnnewExt.grid.ColumnModel({

columns:columns.slice(start||0,finish),

defaults:{

sortable:true

}

});

};

然後

vargrid=newExt.grid.GridPanel({

colModel:createColModel(4),

plugins:[filters],

//這兩個屬性是重點，加上去就可以了

});

效果看圖片。

建議你去下載官方的源代碼，然後看其中的例子。

裡面有一個就是如何自定義這個的

⑽ extjs中下拉框的內容實現有條件選擇，對應的情況下可以選擇一些對應的選項

參考代碼如下：
{ header: '單位名稱', dataIndex: 'unitname',
field:
{ xtype: 'combo',
editable: false,
emptyText: "請選擇...",
valueField: "id",
displayField: "text",
mode: 'local',
store: storeddl
}
}

var storeddl = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: "../../Handler/SystemHandler/UnitHandler.ashx?Lx=ddl"
},
root: 'items',
forceSelection: true,
// lazyRender: true,
fields: ['id', 'text'],
listeners:

{

select: selectRow,

focus: eventFocus

}
});