We Keep Coding

How to implement a drop-down button inside a table header in Ext.js

For a month I have started working with Ext.Js 4, creating all kind of widgets. Right now I am tying to implement a drop-down option for a column header.
That can be based on something like this ColorPicker
https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker
My code creates a Grid Panel like in this img
Ext.apply(me, {
items : [{
xtype : 'gridpanel',
itemId : 'gridpanelId',
margin : '0 0 0 0',
layout : 'fit',
viewConfig : {
emptyText : '',
deferEmptyText : false,
markDirty : false
},
ftype : 'filters'
}],
store : errorstore,
plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
pluginId : 'celledit',
clicksToEdit : 1
})],
tbar : [{
xtype : 'ixbutton',
itemId : 'tbarswitcha',
text : '',
bgCls : 'but-image-base tbar_error_quit',
height : 60,
width : 90,
margin : '0 10 0 10'
}],
columns : [{
header : 'Startdate',
itemId : 'ColumnStartdate',
dataIndex : 'startdate',
flex : 2,
sortable : true,
renderer : function(value) {
return MyApp.app.formatDate(value);
}
},{
header : 'Source',
itemId : 'ColumnSource',
dataIndex : 'source',
flex : 3,
sortable : false
}
],
bbar : {
xtype : 'ixpagingtoolbar',
itemId : 'ixpt',
margin : '5 10 5 10',
numbButtons : 4,
width : 400
}
}]
});
I am trying to build a possibility for the user to choose a specific type of 'Source'. Something like a filter, where the user has pre-defined options from which to choose, and not to type in.
How should I define a drop-down inside this
columns : {
header : 'Source'
}

Any items you put in a column is placed in the header. Simple example without any styling:
columns = [
{
header: 'Source',
items: [
{
xtype: 'button',
text: 'Options',
menu: {
items: [
{
text: 'Item1'
},
{
text: 'Item2'
},
]
}
}
]
},
]

Extjs align buttons center in container

I have following container with several buttons:
{
xtype : 'container',
width : 320,
layout : 'hbox',
cls : 'readable-form no-border',
labelSeparator : '',
ref : '../sendBackForm',
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
style : {
margin : 'auto'
},
items : [ {
xtype : 'button',
itemId : 'yes',
iconCls : 'save-button-icon',
text : 'Yes',
ref : '../../yes'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'checker',
iconCls : 'save-button-icon',
text : 'Back to checker',
ref : '../../checker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'prebooker',
iconCls : 'save-button-icon',
text : 'Back to prebooker',
ref : '../../prebooker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'cancel',
text : 'Cancel',
ref : '../../cancel'
}, {
xtype : 'spacer',
width : 90
}, {
xtype : 'button',
itemId : 'ok',
hidden : true,
text : 'Ok',
ref : '../../ok'
} ]
}
the problem is when i hide all buttons and want to show only ok button, it appears near left window corner, how i can place it in the middle of the window?

Have you tried you add this following code on your container ? : autoEl: {tag: 'center'}

you can try placing spacers before and after "OK" button,
...
items: [
...
{xtype: 'tbspacer', flex: 1},
{
xtype : 'button',
itemId : 'btnok',
hidden : true,
text : 'Ok',
ref : '../../ok'
},
{xtype: 'tbspacer', flex: 1}
...
and "OK" and "Cancel" button handlers
....
bindHandlers: function(){
var me = this;
me.getComponent('btnok').on('click', function(){
me.toggleButtons(true);
});
me.getComponent('btncancel').on('click', function(){
me.toggleButtons(false);
});
},
toggleButtons: function(visible){
this.getComp('btnyes').setVisible(visible);
this.getComp('checker').setVisible(visible);
this.getComp('prebooker').setVisible(visible);
this.getComp('btncancel').setVisible(visible);
this.getComp('btnok').setVisible(!visible);
}
...
Or manually add spacers before and after "OK" button

Looks like layoutConfig won't work anymore Set 'pack' and 'align' in layout config itself, fiddle here (Click on 'Yes' button to hide all except 'Ok')

Checking a box in one checkboxgroup disables or hides a box with the same value in another checkboxgroup

I have an ExtJS window that has 2 separate panels with checkboxgroups. They both show the same values, but user cannot select the same item from both checkboxgroups.
I want to deal with this a little fancier than just checking and alerting a warning in both ckeckboxgroup's listeners when user selects already selected value in another checkboxgroup.
To avoid alerts, I want to either hide or disable the box.
I have tried to add hidden:true or disabled:true but no luck:
Ext.create('widget.window',
{
title : 'Select a value',
draggable : true,
modal : true,
closable : true,
closeAction : 'destroy',
width : 400,
height : 350,
layout:
{
type : 'hbox',
align : 'stretch'
},
items :
[{
xtype : 'panel',
title : 'Success',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'success',
columns : 1,
vertical : true,
items : yes_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}]
},
{
xtype : 'panel',
id : 'panel_failure',
title : 'failure',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'failure',
columns : 1,
vertical : true,
items : no_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}],
}],
});
I tried to get the panel_failed like Ext.getCmp('panel_failed').items.add(//something here) inside the change listener. But I cannot figure out whether the add() is the right method, and if is, what is the format to write inside the function.
Thanks

You can define itemId of all your checkboxes and then will be easy to select and disable them with setDisabled(true);

ExtJs - Strange textfield render behavior

I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.

The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'

ExtJS ComboBox dropdown width wider than input box width?

Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?
I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.
Here's my code to create the combo:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});

There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.
This varies from the pervious version, which just let you specify the listWidth property.

I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth

In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.
It's not very intuitive, but it works.
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}