Cancel selection in BoxSelect or ComboBox in ExtJS - extjs

Alhough it sounds as it doesn't make any sense, it does if I get it to work...
What I'm trying to do is get the combo to do nothing, nothing at all... so I managed to stop it from adding the record to the selected records list. But I can't find the way to stop it from painting the item blue.
The best way to understand what I'm trying to do is check the live preview in the ExtJS Docs page, and see how if you select an item in the dropdown list it goes blue although it doesn't add it to the selectedRecords list.
Here is the url to the ExtJS Docs page...
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox
For those of you not familiar with the tool, just look for the Code Editor there, paste this code and click Live Preview.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
multiSelect:true,
renderTo: Ext.getBody(),
onListSelectionChange:function(){
console.log('Do nothing');
}
});

Is this what you are looking for?
onListSelectionChange:function(){
this.picker.getSelectionModel().deselectAll();
}
See it working here: http://jsfiddle.net/lontivero/5Ftrf/1/
Update
If you want to keep the previously selected items as they are, you could try with this. It will prevent only new selections.
onListSelectionChange:function(){
var lastSelected = this.picker.getSelectionModel().lastSelected;
itemNode = this.picker.getNode(lastSelected || 0);
if (itemNode) {
this.picker.getSelectionModel().deselect(lastSelected );
}
}
in jsfiddle: http://jsfiddle.net/lontivero/5Ftrf/2/

Related

Trying to get a basic combo to work in ExtJS

I want to use a very simple combo box in ExtJS, but I was surprised to learn that it seems as though I have to complexify things by using a store.
I have a single array of data :
var states = [
{"name":"Alabama"},
{"name":"Alaska"}
]
I create my model 'State' linking to the 'name' field, and then I create my store linking to the model, and the array of data.
Ext.regModel('State', {
fields: [
{type: 'string', name: 'name'}
]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
Now I create my combo, as a field in my panel :
var f = Ext.create('Ext.form.Panel', {
items: [
{
fieldLabel: 'hi there',
xtype: 'combobox',
name: 'XXXX',
store:store1,
maxLength: 64,
allowBlank: false
}
]
})
Nothing tells me that I am doing anything wrong, but I get an 'Uncaught TypeError: Cannot read property 'indexOf' of undefined ' whenever I try and open the combo.
My fiddle is here :
http://jsfiddle.net/sr61tpmd/1/
Another aside to my question is, what is the simplest way I can present a combobox in ExtjS?
As long as you only want a combo box with same value as displayed, it is entirely possible to define the store as an array.
xtype:'combo',
store:['Alabama','Arkansas',...]
A real extjs store is necessary where your displayed text differs from the value. You can see a working example for this (also using the us states, actually) in the ext docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox

customizing sencha yes no combo within a specific panel without affecting parent combo box

I need to customize the yes no combo within a specific panel, local to the panel without affecting the parent yesnocombo box configuration. Is there a way to do this?
I am referring to the form I posted earlier in another thread in the Sencha forums, but no one has answered. The url is:
http://www.sencha.com/forum/showthre...ng-Sencha-form
I tried this:
var myNewStore =[
"", "Yes", "Revoke"];
Ext.define('YesNoCombo',{
extend:'Ext.form.ComboBox',
store:myNewStore,
value:'',
emptyText:'Select...',
labelalign:'left',
labelWidth:550,
inputWidth:80,
allowBlank:true,
listeners:{
select:function(comp,record,index){
if(comp.getVelue() == "" || comp.getVale() ==="&nbsp")
comp.setValue(null);
}
}
});
but this broke the format of the form.
Is there a way to create a local combo with custom variables like this:
var UserForm_BlahBlahBlah=Ext.create('YesNoCombo', {
name:"UserForm_BlahBlahBlah",
fieldLabel:"BlahBlahBlah",
values:" Yes" "Revoke",
});
I tried this but it will not work. But you get the idea- It is just creating a local extension within a specific panel with new values.
Is this possible? Or is there a better way that sencha implements customizing the combo box with out affecting the parent class?
Regards,
umbre gachoong
You can easily extend Ext.form.ComboBox class and create your own combo box class. Then you can use your combobox in forms.
In the exmaple I create custom combobox by using its xtype which I defined by alias: 'widget.yesNoCombo'. You can also create instance of custom combobox by var combo = Ext.create('YesNoCombo');
Ext.define('YesNoCombo',{
alias: 'widget.yesNoCombo',
extend:'Ext.form.ComboBox',
store: ["No", "Yes", "Revoke"],
emptyText:'Select...',
allowBlank:true
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items:[
{
xtype: 'yesNoCombo',
fieldLabel:'Yes No Label',
name: 'combo',
},
{
xtype: 'textfield',
fieldLabel: 'Another field',
name: 'anotherField',
},
]
});
See this fiddle https://fiddle.sencha.com/#fiddle/210

ExtJS: Fetching information from selected store in combo

I have the following ExtJS Textfield that lives in a form. I have a store called
store_Product that fetches data via ajax proxy and suggest them to the PCODE field.
In reality this store has many other fields such as price,color,size and so on..
I am trying to set an onchange listener on this field such that when the user select the PCODE, it delivers other information (of the Product selected) to other fields in the page.
The code bellows work. The console.log(store_Product.data) correctly fetches the data from the model. However, the data fetched is of the whole store. I just want the one selected. How would I change this code to do that.
{
fieldLabel: 'PCODE ',
name: 'pcode',
typeAhead: true,
xtype: 'combo',
store: store_Product,
displayField: 'pcode',
valueField: 'pcode',
allowBlank:false,
minChars:1,
forceSelection:true,
hideTrigger:true,
queryDelay: 0,
listeners:{
change: function(combo,value){
console.log(store_Product.data)
}
}
}
Thanks.
Of course it's gonna log everything. Have you tried looking at the value you're receiving in the handler?
change: function(combo, value) {
console.log(value);
var idx= store_Product.find('pcode', value),
record = store_Product.getAt(idx);
console.log(record);
}
If pcode is the id of your records, you can use Store.getById:
store_Product.getById(value)

Dynamically changing the DataStore of a ComboBox

I have a combo box which populates its values based on the selection of another combobox.
I have seen examples where the params in the underlying store are changed based on the selection, but what I want to achieve is to change the store itself of the second combo based on the selection on the first combo. This is my code, but it doesn't work. Can someone please help?
{
xtype: 'combo',
id: 'leads_filter_by',
width: 100,
mode: 'local',
store: ['Status','Source'],
//typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false,
value:'Status',
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
filter_to_select.store=leadStatusStore;
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
filter_to_select.store=leadSourceStore;
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
},
{
xtype: 'combo',
id: 'cmbLeadsFilter',
width:100,
store: leadStatusStore,
displayField: 'leadStatusName',
valueField: 'leadStatusId',
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false
},
That is not how its designed to work!! When you set a store in the config, you are binding a store to the combo. You don't change the store, instead you are supposed to change the data when required.
The right way of doing it would be to load the store with correct data from the server. To fetch data, you can pass params that will help the server side code get the set of options you need to load.
You will not want to change the store being used... Simply put, the store is bound to the control as it is instantiated. You can, however, change the URL, and params/baseParams used in any additional POST requests.
Using these params, you can code your service to return different sets of data in your combo box's store.
For the proposed problem you can try below solution :
Use below "listener" snippet for the first "leads_filter_by" combo. It will handle the dynamic store binding / changing for the second combobox.
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
//filter_to_select.store=leadStatusStore;
filter_to_select.bindStore(leadStatusStore);
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
//filter_to_select.store=leadSourceStore;
filter_to_select.bindStore(leadSourceStore);
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
Hope this solution will help you.
Thanks & Regards.
I had a similar problem. The second combobox would load the store and display the values, but when I would select a value, it would not actually select. I would click the list item and the combobox value would remain blank.
My research also suggested that it was not recommended to change the store and field mappings on a combobox after initialization so here was my solution:
Create a container in the view that would hold the combobox to give me a reference point to add it back later
Grab a copy of the initial config off of the combobox ( this lets me set my config declaritively in the view and not hard code it into my replace function ... in case I want to add other config properties later)
Apply new store, valueField and displayField to that config
Destroy old combobox
Create new combobox with modified config
Using my reference from step 1, add the new combobox
view:
items: [{
xtype: 'combobox',
name: 'type',
allowBlank: false,
listeners: [{change: 'onTypeCombo'}],
reference: 'typeCombo'
}, { // see controller onTypeCombo for reason this container is necessary.
xtype: 'container',
reference: 'valueComboContainer',
items: [{
xtype: 'combobox',
name: 'value',
allowBlank: false,
forceSelection: true,
reference: 'valueCombo'
}]
}, {
xtype: 'button',
text: 'X',
tooltip: 'Remove this filter',
handler: 'onDeleteButton'
}]
controller:
replaceValueComboBox: function() {
var me = this;
var typeComboSelection = me.lookupReference('typeCombo').selection;
var valueStore = Ext.getStore(typeComboSelection.get('valueStore'));
var config = me.lookupReference('valueCombo').getInitialConfig();
/* These are things that get added along the way that we may also want to purge, but no problems now:
delete config.$initParent;
delete config.childEls;
delete config.publishes;
delete config.triggers;
delete config.twoWayBindable;
*/
config.store = valueStore;
config.valueField = typeComboSelection.get('valueField');
config.displayField = typeComboSelection.get('displayField');
me.lookupReference('valueCombo').destroy();
var vc = Ext.create('Ext.form.field.ComboBox', config);
me.lookupReference('valueComboContainer').add(vc);
},

Ext js combobox does not display all items in menu

Can someone tell me how to get rid of the feature that filters combo box items.
when i click on the trigger of the combo, i want to display ALL menu items regardless of what text is already in the box, NOT filtered. I've tried several different config options with no luck.
make sense ?
for example, if i have 'View' as my text in the combo, and i click on the trigger, it will only show 'View1' and 'View2' items, i want it to include all the others...
Thanks!
heres my current config
{
...
items: [{
xtype: 'combo',
id: 'myViewsCombo',
emptyText: 'Select View',
selectOnFocus: true,
listeners: {
select: function(combo, record, index) {
L3.handlers.loadView(combo.value);
}},
store: ['View1', 'View2','blahblah']
}]
}
Setting triggerAction: "all" solved the same problem for me.
Try the setting the 'disableKeyFilter' config option to true.
See the ext combobox api.

Resources