Related
I've a grid panel in extJS 4.1.1. With other columns I've an actioncolumn(xtype:'actioncolumn'). I include a handler with that column. When I click it , it works fine and open a new window with many things loading. But I got error when I double click on that column. Advance welcome for any help.......
{
text : 'Signature',
menuDisabled : true,
sortable : false,
id : 'signature',
xtype : 'actioncolumn',
width : 60,
items : [{
icon : "${resource(dir: 'images', file: 'ADD01003.png')}",
tooltip : 'Add Signature',
scope : this,
handler : function(grid, rowIndex, colIndex) {
var records = grid.getStore().getAt(rowIndex).data,
fullName = records.fullName,
nickName = records.nickName,
salutation = grid.getStore().getAt(rowIndex).raw.m00i012001.name,
searchValue = records.id ;
var filters = new Array();
var store =Ext.data.StoreManager.lookup('S02X004001');
store.clearFilter();
filters.push({property:'member', value:searchValue});
store.loadPage(1, {
filters : filters,
callback : function(records, options, success) {
var view = Ext.widget('v02x004001');
view.show();
Ext.getCmp('fullName-sv02x00400104').setValue(fullName);
Ext.getCmp('nickName-sv02x00400104').setValue(nickName);
Ext.getCmp('member-sv02x00400104').setValue(searchValue);
Ext.getCmp('salutation-sv02x00400104').setValue(salutation);
}
});
}
}]
}
Not to resurrect any Zombies, but for anyone having the same Problem in ExtJS 4, 5 or 6 this workaround should work (maybe the Classnames need to be slightly modified, pasted Code is proven to work in 5.1.1).
The trick is to not modify the actioncolumn but to fix the itemdblclick event handler one might have like so:
listeners:
{
itemdblclick: function(v, record, item, index, e)
{
var flyTarget = Ext.fly(e.target);
if(flyTarget.hasCls('x-action-col-icon') || flyTarget.hasCls('x-grid-cell-inner-action-col'))
{
e.stopEvent();
return;
}
//your code here
}
}
Am having a delete button in my EXTJS Application. On clicking the button, am opening a confirmation form, asking the user are they sure to delete the item. The delete button is a part of many forms in my Application. And irrespective of the form being used, am opening the confirmation window.
And on clicking the yes button in the confirmation window, i want to do some action. But these actions have to be specific to the form that was opened first.So, am confused about how to use the same view, the same button, but different actions depending upon the first form that was opened.
View: This is the window that opens on clicking the delete button in any of the forms
Ext.define('app.view.GenMessageWin', {
extend : 'Ext.panel.Panel',
alias : 'widget.genmessagewin',
var fp = {
xtype : 'panel',
itemId : 'MSGPANEL',
width : Width,
height : 150,
cls : 'msg effect1',
layout : 'form',
border : false,
items : [{
xtype : 'panel',
//cls : 'winTitle',
html : msgTxt,
border : 0
}, {
xtype : 'form',
itemId : 'MSGFORM',
border : false,
title : '',
buttonAlign : 'center',
fieldDefaults : {
msgTarget : 'side',
labelWidth : 110,
size : 30
},
buttons : [{
text : LANG.BTYES,
iconCls : 'icon-tick-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'delete',
id : 'BTYES'
}, {
text : LANG.BTNO,
iconCls : 'icon-cross-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'notDelete',
id : 'BTNO'
} ]
Controller
init : function() {
this.control({
'button[action = delete]' : {
click : this.delete
},
'button[action = notDelete]' : {
click : this.notDelete
},
So, in the delete action, we have to determine which form has been opened in the first place, and then delete the data accordingly.
You have 3 options:
1) Make the selector more specific:
'form1 button[action=delete]': {
click: this.form1Delete
},
form1Delete: function(){
this.showMsg(function() {
// form 1 delete
});
}
2) Traverse back up the component hierarchy and find the open form
onDelete: function(btn) {
var form = btn.up('form'); // find an xtype form or subclass
if (form.someCondition) {
//foo
} else {
//bar
}
}
3) As suggested by Dmitry. You'll need to convert it over to 'MVC style'.
Ext.define('ConfirmButton', {
extend: 'Ext.button.Button',
title: '',
msg: '',
requires: ['Ext.window.MessageBox'],
initComponent: function(){
this.callParent();
this.on('click', this.handleClick, this);
},
handleClick: function(){
Ext.MessageBox.confirm(this.title, this.msg, this.checkResponse, this);
},
checkResponse: function(btn){
if (btn == 'yes') {
this.fireEvent('confirm', this);
}
}
});
Ext.onReady(function(){
var btn = new ConfirmButton({
renderTo: document.body,
text: 'Foo',
title: 'Should I',
msg: 'Are you sure'
});
btn.on('confirm', function(){
console.log('Do something');
})
});
I am doing something similar; I simply use the native Ext.Msg class
Controller code
,onDelete: function() {
var me = this;
Ext.Msg.show({
title:'Really shure?',
msg: 'Really wanna do this?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
closable: false,
fn: function(btn) {
if (btn == 'yes') {
me.deleteRecord();
}
},
scope: me
});
}
,deleteRecord: function() {
var me = this,
store = Ext.StoreMgr.lookup('datastore');
store.remove(me.selectedRecord);
store.sync();
}
I would recommend you to keep all logic concerning this within the controller. I your case it'seems that's no problem, cause you just catching the button-events. You problem may be that all controllers catch these, if you are using totally the same window.
You can solve this for example by creating the action property value dynamically when creating the window. Like action='onDeleteCar'
I think you should embed the 'confirmation' functionality inside the button, i.e. create your own ConfirmButton class that would first fire a dialog upon pressing and executing the passed handler only if the dialog exited with "yes".
Here is the example implementation:
Ext.define('My.ConfirmButton', {
extend: 'Ext.button.Button',
alias: 'widget.confirmbutton',
dlgConf: {
title: 'Are you sure?',
msg: 'Are you sure you want to delete this?',
buttons: Ext.Msg.YESNO,
closable: false
},
initComponent: function() {
this.callParent(arguments);
// remember the originally passed handler
this.origHandler = this.handler;
this.origScrope = this.scope;
// override current handler to fire confirmation box first
this.handler = this.confirmHandler;
this.scope = this;
},
confirmHandler: function(me, e) {
// show dialog and call the original handler only on 'yes'
Ext.Msg.show(Ext.applyIf({
fn: function(buttonId) {
if(buttonId == 'yes') {
me.origHandler && me.origHandler.call(me.origScope || me, me, e)
}
},
scope: me
}, this.dlgConf))
},
// Method used to dynamically reassign button handler
setHandler: function(handler, scope) {
// remember the originally passed handler
this.origHandler = this.handler;
this.origScrope = this.scope;
// override current handler to fire confirmation box first
this.handler = this.confirmHandler;
this.scope = this;
return this;
},
});
Here is the sample usage:
Ext.create('My.ConfirmButton', {
text: 'Delete me',
renderTo: Ext.getBody(),
handler: function() {
alert('Aww, you deleted something! :(')
}
});
As you see, the confirmation logic is hidden from the outside world, you use this button exactly like you would use a regular Ext.Button (by passing a handler to it). Also, you can override the configuration of the dialog that the button fires (you may want to adjust it to your needs, e.g. allow passing record name to the dialog for a friendlier UI).
Note that the code isn't thoroughly tested, some cases might be left uncovered.
UPD. You need to add an alias (former xtype) to the component class definition so you can use it in ComponentQuery in your controller code, e.g.
this.control({
'confirmbutton[action = delete]' : {
click : this.delete
},
'confirmbutton[action = notDelete]' : {
click : this.notDelete
}
})
The final solution that i used was to declare variables using the global namespace so that they can be accessed from anywhere. On opening the first form, i get the data from the form using the record variable, and assign them a global name like
App1.Var1 = record.data.id;
And, on opening the delete window, these variables can be accessed by App1.Var1 when the buttons are clicked.
I want a button in column header dropdown menu of grid in extjs4.
so that i can add or delete columns which are linked in database.
Any help will be appreciated...
Thankyou..:)
Couple of months ago I had the same problem. I've managed to solve it by extending Ext.grid.header.Container (I've overrided getMenuItems method). However, recently, I've found another solution which requires less coding: just add menu item manualy after grid widget is created.
I'll post the second solution here:
Ext.create('Ext.grid.Panel', {
// ...
listeners: {
afterrender: function() {
var menu = this.headerCt.getMenu();
menu.add([{
text: 'Custom Item',
handler: function() {
var columnDataIndex = menu.activeHeader.dataIndex;
alert('custom item for column "'+columnDataIndex+'" was pressed');
}
}]);
}
}
});
Here is demo.
UPDATE
Here is demo for ExtJs4.1.
From what I have been seeing, you should avoid the afterrender event.
Context:
The application I am building uses a store with a dynamic model. I want my grid to have a customizable model that is fetched from the server (So I can have customizable columns for my customizable grid).
Since the header wasn't available to be modified (since the store gets reloaded and destroys the existing menu that I modified - using the example above). An alternate solution that has the same effect can be executed as such:
Ext.create('Ext.grid.Panel', {
// ...
initComponent: function () {
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
this.createHeaderMenu(menu);
}, this);
},
createHeaderMenu: function (menu) {
menu.removeAll();
menu.add([
// { custom item here }
// { custom item here }
// { custom item here }
// { custom item here }
]);
}
});
For people who would like to have not just one "standard" column menu but have an individual columnwise like me, may use the following
initComponent: function ()
{
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
menu.on('beforeshow', this.showHeaderMenu);
}, this);
},
showHeaderMenu: function (menu, eOpts)
{
//define array to store added compoents in
if(this.myAddedComponents === undefined)
{
this.myAddedComponents = new Array();
}
var columnDataIndex = menu.activeHeader.dataIndex,
customMenuComponents = this.myAddedComponents.length;
//remove components if any added
if(customMenuComponents > 0)
{
for(var i = 0; i < customMenuComponents; i++)
{
menu.remove(this.myAddedComponents[i][0].getItemId());
}
this.myAddedComponents.splice(0, customMenuComponents);
}
//add components by column index
switch(columnDataIndex)
{
case 'xyz': this.myAddedComponents.push(menu.add([{
text: 'Custom Item'}]));
break;
}
}
I took #nobbler's answer an created a plugin for this:
Ext.define('Ext.grid.CustomGridColumnMenu', {
extend: 'Ext.AbstractPlugin',
init: function (component) {
var me = this;
me.customMenuItemsCache = [];
component.headerCt.on('menucreate', function (cmp, menu) {
menu.on('beforeshow', me.showHeaderMenu, me);
}, me);
},
showHeaderMenu: function (menu) {
var me = this;
me.removeCustomMenuItems(menu);
me.addCustomMenuitems(menu);
},
removeCustomMenuItems: function (menu) {
var me = this,
menuItem;
while (menuItem = me.customMenuItemsCache.pop()) {
menu.remove(menuItem.getItemId(), false);
}
},
addCustomMenuitems: function (menu) {
var me = this,
renderedItems;
var menuItems = menu.activeHeader.customMenu || [];
if (menuItems.length > 0) {
if (menu.activeHeader.renderedCustomMenuItems === undefined) {
renderedItems = menu.add(menuItems);
menu.activeHeader.renderedCustomMenuItems = renderedItems;
} else {
renderedItems = menu.activeHeader.renderedCustomMenuItems;
menu.add(renderedItems);
}
Ext.each(renderedItems, function (renderedMenuItem) {
me.customMenuItemsCache.push(renderedMenuItem);
});
}
}
});
This is the way you use it (customMenu in the column config let you define your menu):
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
plugins: ['Ext.grid.CustomGridColumnMenu'],
columns: [
{
dataIndex: 'name',
customMenu: [
{
text: 'My menu item',
menu: [
{
text: 'My submenu item'
}
]
}
]
}
]
});
The way this plugin works also solves an issue, that the other implementations ran into. Since the custom menu items are created only once for each column (caching of the already rendered version) it will not forget if it was checked before or not.
I have a form that has multiple Combo Box fields that are attached to remote stores:
Ext.define('app.ux.form.MyCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.mycombo',
store: this.store,
displayField: 'displayField',
valueField: 'valueField',
forceSelection: true,
autoSelect: true,
initComponent: function() {
this.addEvents('selectitem');
this.enableBubble('selectitem');
this.callParent(arguments);
this.listeners = {
change: function(field, value) {
this.fireEvent('selectitem', field, value);
}
}
}
})
fieldLabel: 'DisabilityType',
name: 'f_disability_type',
xtype: 'combo',
valueField: 'valueField',
displayField: 'displayField',
forceSelection: true,
autoSelect: true,
store: 'DisabilityTypes'
DisabilityTypes is a basic Ext.data.store with autoLoad set to false and autoSync set to true. When you click on the dropdown tied to the store, the store loads and shows the list of values.
When I call loadRecord on the BasicForm Object that contains this dropdown and pass it a model, it fills in the combo boxes that use local stores, but doesn't load the combo boxes that use remote stores. This is because either the combo box store isn't loaded (autoLoad: false) or the combo box is loaded AFTER the form loads (autoLoad:true).
I am aware that this was a problem in Ext 3.3.x and that there was a plugin made to fix it:
/**
* When combo box is used on a form with dynamic store (remote mode)
* then sometimes the combobox store would load after the form data.
* And in that case the setValue method of combobox will not
* set the combobox value properly. This override makes sure that the
* combobox store is completely loaded before calling the setValue method.
*/
Ext.override(Ext.form.ComboBox, {
setValue : function(v){
var text = v;
if(this.valueField){
if(!Ext.isDefined(this.store.totalLength)){
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
if(this.store.lastOptions === null){
var params;
if(this.valueParam){
params = {};
params[this.valueParam] = v;
}else{
var q = this.allQuery;
this.lastQuery = q;
this.store.setBaseParam(this.queryParam, q);
params = this.getParams(q);
}
this.store.load({params: params});
}
return;
}
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else if(this.valueNotFoundText !== undefined){
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});
Has this problem been fixed in Ext 4? Or do I need to find another plugin that's Ext 4 compatible?
My solution:
Ext.form.field.ComboBox.override( {
setValue: function(v) {
v = (v && v.toString) ? v.toString() : v;
if(!this.store.isLoaded && this.queryMode == 'remote') {
this.store.addListener('load', function() {
this.store.isLoaded = true;
this.setValue(v);
}, this);
this.store.load();
} else {
this.callOverridden(arguments);
}
}
});
Ext.form.field.ComboBox.override( {
setValue: function(value) {
if( typeof value != 'object' && !Ext.isEmpty(value) && !this.store.isLoaded && this.queryMode == 'remote') {
value = (value && value.toString) ? value.toString() : value;
this.store.addListener('load', function() {
this.store.isLoaded = true;
this.setValue(value);
}, this);
this.store.load();
} else {
this.callOverridden(arguments);
}
}
});
just another override - working for me, using the [form].loadRecord([model]) method.
beware: if you use the opposite way [form].updateReocrd([model]) the values of the options will not use the default delimiter, but just ',' instead.
so - if you have a loadRecord, do something, then call updateRecord an loadrecord later, the selections will got lost, due to the wrong delimiter. taht's why the "lower than 2" comparison is being performed here
Ext.form.field.ComboBox.override( {
setValue: function(v) {
if (this.multiSelect && typeof v != 'undefined' && typeof v.split == 'function'){
if (this.value.length < 2){
this.setValue(v.split(this.delimiter));
}
} else {
this.callOverridden(arguments);
}
}
});
I have an Ext.form.ComboBox with the following properties:
fieldLabel: 'Regiune',
valueField: 'id',
displayField: 'reg',
id: 'cbRegR',
typeAhead: true,
store: new Ext.data.JsonStore({...}),
mode: 'local',
emptyText: '',
listeners:{...}
The problem is that I have to manually delete the combobox' input field after selecting a value from the dropdown list to view all the list items. The matter is the list displays only the items that begin with letters in input field.
How can I clear the input field on expanding dropdown list? I tried the following but it doesn't work:
listeners: { 'expand': function() { cbRegR.clearValue(); } }
Seems to be easy but it ain't so for me.. Any bright ideas? Thanks in advance.
Adding the config property to your combobox
triggerAction: 'all'
might do the trick, without the need to register an expand event handler or clearing the combobox's value
It is an intrinsic behaviour of Ext JS ComboBox-es to filter the list items based on the field value, as you already know.
You could perceivably override the expand() method, making additions to clear out the value before it renders the list. EG:
Ext.override(Ext.form.ComboBox, {
expand : function(){
if(this.isExpanded() || !this.hasFocus){
return;
}
//ADDITIONS HERE:
this.clearValue();
this.doQuery("", true);
//ADDITIONS END HERE
if(this.title || this.pageSize){
this.assetHeight = 0;
if(this.title){
this.assetHeight += this.header.getHeight();
}
if(this.pageSize){
this.assetHeight += this.footer.getHeight();
}
}
if(this.bufferSize){
this.doResize(this.bufferSize);
delete this.bufferSize;
}
this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
// zindex can change, re-check it and set it if necessary
this.list.setZIndex(this.getZIndex());
this.list.show();
if(Ext.isGecko2){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
}
this.mon(Ext.getDoc(), {
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
});
this.fireEvent('expand', this);
}
});
The expand event is the good one but you have to be careful about the scope.
listeners: {
'expand': function() {
cbRegR.clearValue();
},
scope:this
}
Does setting the scope helps?
Using cbRegR won't work, because it's an undefined variable. Either use
listeners: { 'expand': function() { Ext.getCmp('cbRegR').clearValue(); } }
or, a more sophisticated approach:
listeners: { 'expand': function(self) { self.clearValue(); } }