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.
Related
I have an ExtJS check-tree ExtJS Check Tree that I am trying to add some control to based on items checked/unchecked. It doesn't seem to fire correctly though.
Here is a Fiddle Example
When checkbox 'A' is selected, I want to hide the textfield, 'testValue', which works, but then if I unselect checkbox 'A', I want to show the textfield, 'testValue', which does not work.
For this test I am merely looking to see if the selections.selected.length === 0. However, when I unselect any of the checkboxes, the listener does not seem to be firing, since the alert message is not getting triggered - plus, if I then try to reselect the check box again it still does not fire.
I would use a selection Model (as outlined below) to achieve this (since I know it works), but then this places checkboxes on all my tree items when I just want to have the leaf nodes with checkboxes.
selModel: {
type: 'checkboxmodel',
listeners: {
selectionchange: 'onCheckedNodesChange'
}
}
Any suggestions would be most welcome!
EDIT
Adding allowDeselect: true and a listener for select and deselect sort of worked (I updated the Fiddle to exhibit the behavior):
selModel: {
allowDeselect: true,
listeners: {
deselect: function(model, record, index) {
text = record.get('text');
alert(text);
},
select: function(model, record, index) {
text = record.get('text');
alert(text);
}
}
},
I want to make sure that when 'A' is selected, the textfield remains hidden, but if you select another item in the list and then deselect it, the textfield returns.
I am trying to use the getChecked() method alone with when selectionchange event occurs. However, this only seems to return data when I do a submit (for example, on the Get checked nodes control). Any suggestions would be most welcome. This should not be so difficult.
For tree panel we have checkchange event it is similar to the selectionchange event.
http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.tree.Panel-event-checkchange
checkchange( node, checked, eOpts )
Fires when a node with a checkbox's checked property changes
Parameters
node : Ext.data.TreeModel
The node who's checked property was changed.
checked : Boolean
The node's new checked state
eOpts : Object
The options object passed to Ext.util.Observable.addListener.
var fields = [
{
name: 'column'
},
{
name: 'leaf',
type: 'boolean'
},
{
name: 'checked',
type: 'boolean'
},
{
name: 'cls',
type: 'string',
defaultValue: 'x-tree-noicon'
},
];
this.dataModel = Ext.define('Filter-' + this.getId(), {
extend: 'Ext.data.Model',
fields: fields,
});
columns: [
{
xtype: 'treecolumn',
width: 200,
itemId: "filter",
dataIndex: 'column' ,
renderer: function (val, metaData, r) {
},
scope: this,
},
],
listeners: {
'checkchange': Ext.bind(function (node, checked,eOpts) {
},
scope: this
The checkboxes you are seeing are not part of the selection behaviour. Instead, they come from the checked configuration on the NodeInterface class.
Your tree panel is using the default selModel, which is row-based selection, with no deselect option. If you want the in-tree checks to control the selection, you'll need to configure that manually, probably by listening to change events from the store.
OTH, if all you care about is finding out which items are checked or not, you can use the getChecked() method on the TreePanel
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() ===" ")
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
I attempted to disable the combo box component with the disabled attribute however it's not working. The code is below:
xtype: 'bkl.exchange.ExchangeRFCombo',
disabled: true,
fieldLabel: 'Exchange',
id: 'exchMapee',
valueField: 'omsMappingCode',
editable: false
The mode is remote and not local. So the values displayed by the combo box is from the database. Is there a solution to this problem?
Your help is kindly appreciated.
Thank You.
You can add this to the combo box:
listeners: {
'afterRender': function () {
this.disable();
}
}
That will disable the box after being rendered.
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/
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9