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'
},
]
}
}
]
},
]

menuHide gets called on clicking on expand button in a treepanel in IE9/10

Question
I have a button which when clicked shows a menu using menuShow function. The menu has a treepanel which has many parent nodes and child nodes. The problem is when we click on expand arrow of any parent child the function menuHide() gets called and instead of expanding the menu collapses. The problem is specific to IE9/10 and it is working fine with Chrome.
Code
The piece of code for button is :
'Ext.button.Button', {text: '<span class="Copy" style="color:#000000"><I>Click to select a scenario<I></span>',
listeners: {menuHide : function(btn, menu, opts) {//logic},
menuShow : function(btn, menu, opts){ //logic}},
menu : {
xtype : 'menu',
styleHtmlContent : 'true',
width : 300,
style :{
'border': '0px solid #FFFFFF'
},
shadow : false,
items : [{ xtype: 'label', width : 250, text: 'click here'},
{
xtype : 'treepanel',
autoScroll : 'true',
itemId : 'treePanelID',
height: 190,
width : 270,
store : this.store,
style : {'font-family': 'Helvetica Neue,Arial',
'font-size': '18px',
'font-weight': 'bold',
'line-height': '20px',
'letter-spacing': '0px'
},
useArrows : true,
margin : '-20 0 0 15'
columns: [{
xtype : 'treecolumn',
dataIndex : 'text',
menuDisabled : true,
width : 100,
flex : 1,
renderer : function(value, values,record)
}],
listeners : {
itemclick : function( record, index, eOpts ){
if(index.isLeaf()){ logic }
else{ logic}
} } }]}}

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 combo not working in IE7

Ext js combo is not working in IE7. I need this combo act like textbox with virtual combo (like google search). It is working in IE9 and FF but not in IE7
This is my code:
SearchIncidentForm=new Ext.FormPanel ({
border:false,
renderTo:'searchIncidentDiv',
id: 'searchIncidentForm',
items : [{
xtype:'panel',
id :'panelsearchIncident',
layout:'column',
defaults:{
columnWidth:0.50,
labelAlign : 'top',
layout:'form',
border:false,
bodyStyle:'margin-top:5px; '
},
border:false,
items : [{
defaults:{anchor:'100%'},
items:[{
id : "incidentId",
fieldLabel : 'Incident Id',
labelStyle: 'color: #6C6C6C;width:85px;padding-top:7px;height: 22px;',
xtype : 'combo',
store:incidentStores,
//style: 'width:85px;height: 18px;',
width:100,
allowBlank : false,
labelAlign: 'top',
displayField : 'incidentId',
valueField : 'incidentId',
selectOnFocus : true,
typeAhead : false,
mode : 'remote',
triggerAction : 'all',
editable: true,
msgTarget:'qtip',
listAlign : 'tl-bl?',
//anchor : '80%',
minChars : 1,
hideTrigger:true,
hiddenName: 'incidentId',
listWidth:100,
listHeight:50,
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
},
beforequery : function(){
var val=Ext.getCmp('incidentId').getValue();
if(isNaN(this.getEl().dom.value)){
Ext.Msg.alert("","Please type numeric value");
}
else{
Ext.getCmp('incidentId').getStore().proxy.setUrl('getIncidentId.html?&query='+this.getEl().dom.value);
}
}
}
}]
},{
items:[{
xtype : 'button',
text : 'Search',
style: 'margin-top:19px;margin-left:20px;width:50px;',
width: 35,
height:15,
handler : incidentSearchButtonHandler
}]
}]
}]
});
}
but it's not working in IE. When I press Search button, an alert is shown that please type Id. That means it doesn't take the value that has been typed. Please help.

I've been bitten by this before with IE: you have an extra comma after the last element of your array:
items:[{
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
}, // <------ Extra comma. Delete it.
]}

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'