extjs下拉框不選中

A. EXTjs的combo組件的下拉選項框的高度和垂直滾動條如何設置

設置combo的一個屬性：

maxHeight:100,//下拉列表的最大高度像素值

B. 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();

C. 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

}
});

D. extjs 給下拉框設置數據源問題

非同步載入導致。
你在沒有加alert()前，數據源尚未載入完成，你就進行賦值了。內所以只會顯容示key，而不會是value。
你的alert()，是賦值延後了，數據已經載入完成，所以可以了。

解決思路：你要在數據源載入完成後在進行賦值。——用回調函數callback吧

我的代碼（可能麻煩，不過你這個情況我這樣解決）：
以下代碼加在你創建settleTempStore後。

settleTempStore.on('load',function(){Ext.getCmp('openStlnod').setValue(Ext.getCmp('openStlnod').getValue())});

可能標點會不會不匹配，直接打沒校驗過，你直接調整下。

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

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

F. 用網上的方法寫 extjs聯動下拉框 但是我的不載入數據

java">很簡單的一個問題,下拉框聯動，只需在選擇上一個下拉框的時候，加一個事件，這個事件裡面載入下一個下拉框，即可達到聯動效果

G. extjs 怎麼獲取下拉框中選中值所對應的ID

首先獲取下拉框的值Ext.getCmp("q_jg").getValue()，這步應該沒問題吧
然後，調用以下方法，進行替換兆搏沒。銀悔我這是性別的例子，樓主對照這改改就好
function gridUserType(value) {
var inx = sexStore.getCount();
for ( var i = 0; i < inx; i++) {
var rec = sexStore.getAt(i);
if (rec.get("id"族納) == value) {
return rec.get("name");
}
}
}

H. Extjs的EditGridPanel，其中有一列是下拉框，下拉框選擇後，後邊列級聯顯示。

editor:{

xtype:combobox',

• id:'date',

editable:false,//設置能否編輯

• listeners:{

• change:function(){

• alert(Ext.getCmp('date').getValue());

• }

}

}

上面有黑原點的部分是你需要明白的

大致思路我可以給你說下:

你監聽你的下拉框獲得你選擇用戶的ID後用Ext.ajax.request()非同步於伺服器端請求數據獲得數據後你在賦值給後面三個你需要顯示的文本框就行了

• 怕你對Ext.ajax.request()不熟悉附上示例代碼以供參考

Ext.ajax.request({

url:,//根據用戶ID查詢數據的後台地址

method:'POST',

sync:true,

callback:function(options,success,response){

varresult=Ext.decode(response.responseText);//把返回值賦給result

//用result取你後面三個文本框需要的值我想不用說下去你也該知道怎麼寫了吧

}

})

I. extjs combo下拉列表組件的監聽事件中設置聯動下拉列表disabled屬性為false 頁面沒反映

ext其內部源碼有這么一句話 this.el.dom.disabled = true;
disabled 的屬性 當submit提交時 不會提交後台
disabled 在IE8以上中有個版bug，一般人很少權遇到過：
<select id="select"><option>asdaasd</option></select>
document.getElementById("select").disabled = "disabled";
document.getElementById("select").disabled = true;
如果disabled 被設置了disabled之後，你再設置為true的時候是無效的，必須設置為disabled = 「」才會有效果
你可以試下citytemp.setDisabled("disabled");

實在不行就直接用dom元素去改，直接找到 document.getElementById("select").disabled = "disabled"就可以了

J. extjs 如何獲取combox下拉框中選中的值

你的combo的配置就有些不對

displayField這里的參數是對應的下拉框實際值

valueField這里的參數是對應的下拉框顯示值

他們應該對應的是json的鍵值

也就是說displayField再怎麼也應該填'name'而不是'datatypename'吧

至於如何獲取這些值combo有對應方法

//獲取comboxID值
varv=dataNameCombo.getValue();
//獲取顯示值
vart=dataNameCombo.getRawValue();