Javascript extjs消息显示组合框
我使用ExtJS4Javascript extjs消息显示组合框,javascript,extjs4,Javascript,Extjs4,我使用ExtJS4 Ext.Msg.show({ title: 'test title', msg: 'test msg', buttons: Ext.MessageBox.OKCANCEL, }); 如何将combobox添加到msg? 谢谢,Ext.Msg只是一个很小的消息窗口,因此它不支持组合,也不支持任何其他组件,只支持带有一些按钮的简单文本 窗口组件将更准确地满足您的需要()。Ext.MessageBox是一个单独的组件,
Ext.Msg.show({
title: 'test title',
msg: 'test msg',
buttons: Ext.MessageBox.OKCANCEL,
});
如何将combobox添加到msg?
谢谢,Ext.Msg只是一个很小的消息窗口,因此它不支持组合,也不支持任何其他组件,只支持带有一些按钮的简单文本
窗口组件将更准确地满足您的需要()。Ext.MessageBox是一个单独的组件,因此您可以使用下面的方法直接重写其方法,此方法将适用于ExtJS 3.2.1,但不确定是否适用于ExtJS 4
Ext.MessageBox.show = function () {
if (this.inputField) this.inputField.destroy(); //destroy inputField created from previous call
if(this.isVisible()){
this.hide();
}
opt = options;
var d = this.getDialog(opt.title || " ");
d.setTitle(opt.title || " ");
var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
d.tools.close.setDisplayed(allowClose);
activeTextEl = textboxEl;
opt.prompt = opt.prompt || (opt.multiline ? true : false) || (opt.inputField ? true : false);
if(opt.prompt){
if(opt.multiline){
textboxEl.hide();
textareaEl.show();
textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
activeTextEl = textareaEl;
}else if(opt.inputField){
textboxEl.hide();
textareaEl.hide();
this.inputField = opt.inputField;
this.inputField.render(bodyEl);
activeTextEl = this.inputField;
activeTextEl.dom = {};
activeTextEl.on('select', function(cb) {
activeTextEl.dom.value = cb.getValue();
});
}else{
textboxEl.show();
textareaEl.hide();
}
}else{
textboxEl.hide();
textareaEl.hide();
}
activeTextEl.dom.value = opt.value || "";
if(opt.prompt){
d.focusEl = activeTextEl;
}else{
var bs = opt.buttons;
var db = null;
if(bs && bs.ok){
db = buttons["ok"];
}else if(bs && bs.yes){
db = buttons["yes"];
}
if (db){
d.focusEl = db;
}
}
if(opt.iconCls){
d.setIconClass(opt.iconCls);
}
this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
bwidth = updateButtons(opt.buttons);
progressBar.setVisible(opt.progress === true || opt.wait === true);
this.updateProgress(0, opt.progressText);
this.updateText(opt.msg);
if(opt.cls){
d.el.addClass(opt.cls);
}
d.proxyDrag = opt.proxyDrag === true;
d.modal = opt.modal !== false;
d.mask = opt.modal !== false ? mask : false;
if(!d.isVisible()){
// force it to the end of the z-index stack so it gets a cursor in FF
document.body.appendChild(dlg.el.dom);
d.setAnimateTarget(opt.animEl);
//workaround for window internally enabling keymap in afterShow
d.on('show', function(){
if(allowClose === true){
d.keyMap.enable();
}else{
d.keyMap.disable();
}
}, this, {single:true});
d.show(opt.animEl);
}
if(opt.wait === true){
progressBar.wait(opt.waitConfig);
}
return this;
};
Ext.MessageBox.show({
title: 'Choose',
msg: 'Which one?',
value: 'choice 2',
buttons: Ext.MessageBox.OKCANCEL,
inputField: new Ext.ComboBox(
{
typeAhead: true,
displayField: 'choice',
store: store,
mode: 'local',
triggerAction: 'all',
forceSelection: true
}),
fn: function(buttonId, text) {
if (buttonId == 'ok')
Ext.Msg.alert('Your Choice', 'You chose: "' + text + '".');
}
});
参考资料:
这是一种从Ext.Msg中删除标准文本字段,然后添加自定义组件的技术
Ext.define('ComboBoxPrompt', {
extend: 'Ext.window.MessageBox',
initComponent: function () {
this.callParent();
var index = this.promptContainer.items.indexOf(this.textField);
this.promptContainer.remove(this.textField); // remove standard prompt
this.textField = this._createComboBoxField();
this.promptContainer.insert(index, this.textField);
},
_createComboBoxField: function () {
//copy paste what is being done in the initComonent to create the combobox
return Ext.create('Ext.form.field.ComboBox', {
id: this.id + '-combo',
typeAhead: true,
displayField: 'value',
valueField: 'id',
store: someStore,
mode: 'remote', // local
triggerAction: 'all',
forceSelection: true,
autoSelect: false,
hideTrigger: true,
minChars: 1,
enableKeyEvents: true,
listeners: {
change: function (obj, newValue, oldValue, eOpts) {
//someStore.proxy.extraParams.keyword = newValue;
//someStore.load();
}
} // listeners
});
}
});
var msgbox = Ext.create('ComboBoxPrompt').prompt('New Record', 'Object Name',
function (btn, text) {
if (btn == 'ok') {
Ext.MessageBox.alert('Result', text);
}
})
这是另一种方法。这有点硬编码,但应该可以工作
Ext.MessageBox.show({
title: 'Verification',
msg: 'Please approve by checking the box below.<br /><br /><select id="approval"><option value="1">approved</option><option value="2">denied</option><option value="3">unsure</option></select>',
buttons: Ext.MessageBox.OKCANCEL,
fn: function (btn) {
if (btn == 'ok') {
if (Ext.get('approval').getValue() == "1") {
Ext.MessageBox.alert('Result', 'approved');
else if (Ext.get('approval').getValue() == "2") {
Ext.MessageBox.alert('Result', 'denied');
else if (Ext.get('approval').getValue() == "3") {
Ext.MessageBox.alert('Result', 'unsure');
}
}
}
});
Ext.MessageBox.show({
标题:“核查”,
msg:“请勾选下面的框进行批准。
approveddeniedunsure”,
按钮:Ext.MessageBox.ok取消,
fn:功能(btn){
如果(btn=='ok'){
如果(Ext.get('approval').getValue()=“1”){
Ext.MessageBox.alert('Result','approved');
else if(Ext.get('approval').getValue()=“2”){
Ext.MessageBox.alert('Result','denied');
else if(Ext.get('approval').getValue()=“3”){
Ext.MessageBox.alert('结果','不确定');
}
}
}
});
,我想知道如何更改Ext.MessageBox.js文件。