how to add close icon to the combobox list items at right most
Ext.define('ezdi.view.SaveSearchComboboxView', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.saveSearchComboboxAlias',
queryMode : 'local',
id : 'saveSearchComboId',
store : 'SaveSearchComboboxStore',
emptyText : 'Saved Searches',
displayField : 'searchQueryName',
valueField : 'searchQueryId',
lazyInit: false
});
You can do this by adding triggerXCls and onTriggerXClick to specify any number of additional trigger icons, where "X" is the position of additional trigger.
For example, to add a "clear" icon, you might do something like:
{
...,
id: 'saveSearchComboId',
trigger1Cls: 'x-form-clear-trigger',
onTrigger1Click: function() {
this.clearValue();
}
}
Keep in mind there are only a few "default" trigger icons, which can be found here (for classic theme): ext/resources/ext-theme-classic/images/form. These each have their corresponding "x-form-XYZ-trigger" class. For a different trigger icon (like a "close" icon or an "add" icon), you'll need to create your own images as well as the appropriate CSS class that you can apply to triggerXCls.
See this tread for more info: http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected
Related
i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});
We have ExtJs fields in which LabelAlign is configured as 'top', but when we click on label it focusses the field, this creates problem if the field is checkbox, as on click of checkbox label it checks/unchecks the checkbox field. I have searched for some configs to disable the same , but couldn't find out. Later i used pointer-events:none CSS property on labels but not sure it will be correct solution. please guide.
Fiddle Example illustrating the above issue
You can prevent the click on the label from affecting the checkbox by removing the for attribute from the label. This will break the association between the label and the checkbox. To do this in ExtJS:
Ext.query('label[id^=checkbox]').forEach(function (item) {
item.removeAttribute('for');
});
This will find all of the labels for checkboxes and remove the for attribute so the label is no longer associated with the checkbox.
If you want to implement this for all fields, not just checkboxes, change it to search for all labels:
Ext.query('label').forEach(function (item) {
item.removeAttribute('for');
});
This code should be executed after your form is created.
See updated fiddle here.
There is no as such solution as far as i know for that because it will happen in every field not only in checkbox but there is a workaround that, you can add two xtypes as label and field needed and arrange them in vbox layout and give that label a 'html' config as that fieldlabel of the next field.
For e.g,
{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}
With this the container that will be made by extjs for checkboxfield will be different for label and field so when you click on label that's a different control for it and hence won't check the checkboxfield.
This is how I set up my selection model for my grid :
var selM = Ext.create('Ext.selection.Model', {
mode: 'SINGLE',
toggleOnClick: true,
allowDeselect:true
});
And then in my table I add this as a configuration paramater :
var packageGrid = Ext.create('js.grid.MyGrid', {
selModel: selM
});
The MULTI selection is disabled, which is great. However now nothing remains selected. If I click on a row the highlighting disappears as soon as I move the mouse away.
This could be an extjs bug. I have tried the other parameter 'SIMPLE' as well.
Here is a fiddle which shows my problem :
http://jsfiddle.net/fgkb8yw5/1/
RowModel is the default so you can simply use:
selModel: {
mode: 'SINGLE'
}
Example: http://jsfiddle.net/8mra2het/1/
It's not a bug, Ext.selection.Model is the abstract class - which shouldn't be instantiated directly. Normally - when you specify the selModel declaratively, the grid component will implement one of the grid-context appropriate sub-classes:
Ext.selection.CellModel
Ext.selection.RowModel
I updated your fiddle using RowModel to demonstrate.
How to apply conditions in bind?
In view let
{
xtype : 'label',
bind : {
text : '{//--- set text as per the condition }',
hidden : '{//should be true if 'param' in VM is 1 or 2 else should
be false}'
}
}
in view model, 'param' is a data variable. If value of
param=1, text should be one,
param=2, text should be two,
param=3, text should be three.
Is this possible without formula by applying conditions directly in view?
{
xtype : 'label',
bind :
{
text : '{textVal}'==0?'Test':'TEST1234',
hidden : ('{param}'==1 || '{param}'==2)?true:false
}
}
In the associated viewModel, if one has the property param in data config, then one can use it for binding along with condition checks as mentioned above. If the param value is being changed dynamically, (i.e, this.getViewModel().setData('param', 1)) then still the code will work in hiding the component dynamically. The same applies with the other config, viewModel -> data:{textVal:0,param:1}. If one has an object inside the data, like data:{ config:{ textVal:0 }, param:1 }, One can use bind:{ text:'{config.textVal}' //along with ur condition check }
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);