Once an item is selected, how to disable the rest all items in multiSelect box. So that multiple items should not be selected. Multiselect box display values are:00.00A.M...11.00pm. For ex: if 01.00 am is selected rest all should be disabled though restricted to 1 selection box gets expanded double the existing width. following properties were used:
xtype:'multiselect',
id:'fromMultiselect',
name:'fromMultiselect',
columnWidth: .33,
maxSelections:1,
initValues : true,
hideLabel : true,
width : 130,
height : 90,
allowBlank : false,
disabled: false,
mode:'local',
store : FromTimeStore ,
valueField : 'id',
displayField : 'displayFromTime',
columnWidth: .32
Why not use combobox with multiselect:false and expand it after render?
Nevetheless you can still use multiselect:
add option: maxSelections: 1,
Example here (you must uncomment maxSelections property):
http://dev.sencha.com/deploy/ext-4.0.1/examples/multiselect/multiselect-demo.js
http://dev.sencha.com/deploy/ext-4.0.1/examples/multiselect/multiselect-demo.html
Related
I want to disable a file Upload field dynamically. Like I have a variable say isUploadAllowed. If this variable is true only then FileUpload field is enabled and user can click Browse button.. Else this button is disabled.. How to do it in ExtJs 3.0? I did find few examples but they were all of ExtJs 4.. I have tried:
FileUploadField.setDisabled(true);
but it's not working..
Here is my code, I want to disable it on reset button click!
var fileUploadField = new Ext.ux.form.FileUploadField({
id : 'fileUpload',
name : 'upLoadedFile',
fieldLabel : 'Supporting File(s)',
width : 410,
convertToUpperCase : false,
tabIndex : 9,
allowBlank : true
});
var requestForm = new Ext.form.FormPanel({
id : 'requestForm',
labelAlign : 'right',
labelWidth : 130,
buttonAlign : 'right',
frame : false,
split : false,
fileUpload : true,
autoHeight : true,
collapsible : false,
width : 635,
monitorValid : true,
border : false,
bodyStyle : 'text-align:left;padding:10 10 10 10',
// Layout the form fields here.
items : [{
layout : 'column',
border : false,
items : [{
layout : 'form',
bodyStyle : "text-align:left",
border : false,
items : [fileUploadField]
}],
buttons : [{
id : 'submitBtn',
text : 'Submit',
formBind : true,
handler : doSubmit,
type : 'submit',
scope : this
}, {
text : 'Reset',
formBind : false,
type : 'reset',
handler : function() {
// disable file upload field
}
}]
});
try this:
fileUploadField.disable();
sometimes it works better. Also check letter case
I made a hasty comment before which was deleted. I had the same issue with the upload functionality not being disabled, even though I disabled the field. I realized that was due to Plupload which was enabled on that field, so to disable the upload functionality of the uploader I disabled Plupload:
uploader.disableBrowse(true);
So check if don't have some similar plugin working as well...and disable that as well. Hope that this will help someone...it gave me some headaches.
i am working in extjs4. I have view with component as=
xtype : 'comboboxselect',
id : 'Id1',
displayField: 'emailAddress',
typeAhead: true,
editable : true,
hideTrigger:true,
forceSelection: false,
i want to allow users to enter new emailIds also. So i kept editable as true. But when i am trying to get combobox's selected value on sumbit button click, its not giving me newly inserted emailsId's in combobox.I tries it as =
Ext.getCmp('Id1').getSubmitData() or Ext.getCmp('Id1').getRawValue()
But its not giving me newly inserted emailId's. So how to perform this in extjs4
If this is Ext.form.field.ComboBox (xtype:'combobox') then getValue() returns the current value of the combobox. More info available on sencha docs
Ive got a simple request.. how can i make a combo box blank after i have disabled it? Is it possible to do it without adding a value Field and display field for the blank option?
Also how do i fill the combo box with a certain color once it is disabled and blank??
Here is what i have for the combo box set up....
//PROTOCOL COMBO BOX!
var protocol_cbox = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
// lazyRender: true ,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'Ethernet'], [2, 'Serial']]
}),
valueField: 'myId',
displayField: 'displayText',
});
Again .. i want to achieve making this combo box blank without having an option for it in the data field of the store. is this possible? Basically when the combo box is enable i just want the drop down to contain "Ethernet" and "serial".. and when disable just go blank and then get filled with a color.
THANK YOU GUYS!
Use diabledCls to set the style, example css selector to change the color of combo's field
.my-combo-disabled .x-form-field {
background: none;
background-color: red;
}
use setValue with an empty string while disabling to make it blank.
Sample fiddle here: https://fiddle.sencha.com/#fiddle/1et
xtype:"multiselectfield",
fieldLabel:comboData.Label,
allowBlank:false,
labelAlign:"left",
autoScroll:false,
scroll:false,
width:280,
height:80,
store:comboStore,
value:comboData.selectvalue ? comboData.selectvalue : comboData.items[0].value,
displayField:"name",
valueField:"value",
You can do it using a combobox and setting multiSelect to true.
{
xtype: 'combobox',
multiSelect: true,
.
.
.
}
The value of the combobox will be an array of valueFields of the items selected.
Have question: I have in my database some filed with text (i submitted it through form).
Then I have extJS Panel where my data. I made, when i click on soem field, appears message Box with plain text only (But in my database this text is very beautiful with ul's, with /br/'s and so son) :( Its ok, but my eyes can't read this normally! How to avoid this? Maybe in extJS exists some replace params? replace('/n/', '//br/').. or?
my grid
var Grid = new Ext.grid.GridPanel({
id : 'grid',
store : store,
frame : true,
autoScroll :true,
columns : my_columns,
stripeRows : true,
title :'Answers',
iconCls : 'arrow',
listeners: {
celldblclick: function(Grid, rowIndex, cellIndex, e){
var rec = Grid.getStore().getAt(rowIndex);
var columnName = Grid.getColumnModel().getDataIndex(cellIndex);
Ext.Msg.show({
title : 'Message',
msg : rec.get(columnName),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});
Ext.Msg.getDialog().dd.lock();
}
}
});
Hard to understand your problem - you talk about a panel, then you post an example with grid.
Anyway... maybe the problem is that the message dialog window has preventBodyReset: false by default, which means that the default browser styles for <ul> and many other elements are reset.
Unfortunately there is no easy way to set preventBodyReset: true for the message box window. If you want it for all message boxes, then maybe you can achieve something with code like that:
Ext.MessageBox.getDialog().getEl().addClass('x-panel-reset');
If you don't want to apply it globally, then you probably have to create your own message window.
try using the escape function.
So something like:
Ext.Msg.show({
title : 'Message',
msg : escape(rec.get(columnName)),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});