Let's suppose I have this this simple button:
{
xtype :'button',
text :'button',
id:'address'+counter.no,
handler : function() {}
}
How can I get access to the current button and get access to its properties such as name, id, etc?
I'm aware of Ext.getCmp('compid') but I need to get access to CURRENT button, and I don't know its id.
Do you mean inside the handler function?
See docs at description for handler.
As first parameter this button object is passed, so you could do the following:
{
xtype :'button',
text :'button',
id:'address'+counter.no,
handler : function(thisButton, eventObject) {
//Do something with thisButton like:
alert(thisButton.getId());
}
}
Related
I am new to ag-grid. I am trying to add custom column menu item.
I wrote this in constructor:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu
};
So, Whenever I click filter icon of column, 'addColumnMenu' is called.
Now, in addColumnMenu, I have added my menu item as
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Stats', action: this.callStat }
});
Its giving this.callStat is not defined. Because I am not getting anything in this
Whats wrong here ?
If addColumnMenu needs to access 'this', then it needs to be bound. One way to achieve this:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu.bind(this)
};
I'm new to extjs and I'm looking for a way to add some custom message under my combobox field.
Depending on some conditions (eg. value selected) the message needs to have different text and/or style.
I could play with errorEl associated with my combobox and change it's message/style depending on the state, but this doesnt look like a good approach.
Are you aware of any plugin allowing to add such a message, or is there a shorter way to do this?
Thank you for your suggestions. I ended up writing my own plugin, which then I attached to combobox.
I added new element after error element and I changed messages based on proper combobox events.
afterCmpRender : function() {
var me = this, cmp = me.getCmp();
var messageWrapper = {
tag : 'div'
};
var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
cmp.messageEl = messageEl;
Ext.Array.each(me.messages, function(message) {
var messageConfig = {
tag : 'div',
style : {
display : 'none'
}
};
var newElement = messageEl.insertSibling(messageConfig, "after");
newElement.setHTML(message.value);
newElement.addCls(message.classes);
me.registerMessageEvents(me, cmp, message, newElement);
});
}
I almost always use multiple elements for this, and would not make an attempt to change the field.
Depending on your context, which you didn't provide, I'd say you could have a look at:
Ext.form.field.Display
Ext.form.Label
Ext.tip.Tip
Ext.tip.QuickTip
I'd work with the class Ext.tip.Tip.
You can create
Ext.create('Ext.tip.Tip', {
id: 'myTip',
header: false
});
and then
var tip = Ext.getCmp('myTip');
tip.update('your custom tip message');
tip.showBy(comboboxComponent);
You could also use showAt(..) instead of showBy.
For more information look into the Docu
Here is a Fiddle link to an example.
I have a ComboBox subclass which has a customized template for rendering its data. Once one internal list item is clicked, there is a listener to the browser "click" event, which needs to make some changes on the original combobox.
How can I find a reference to its related combobox from this listener?
This is what I found, which answers my question.
From the "click" listener 2nd argument, we get the click event target element. We can then navigate to its parent boundlist element, using the .x-boundlist class, get its component and finally reach the combobox through its not-documented pickerField property or its getBubbleTarget() method.
click:{
element:'el',
fn: function(ev, target) { //listener
var el= Ext.get(target),
boundList_el, boundList, combobox;
boundList_el= el && el.findParentNode(".x-boundlist");
boundList= boundList_el && Ext.getCmp(boundList_el.id);
combobox= boundList && boundList.getBubbleParent();
//Do something with the combobox, like changing its value
}
Since the customized combo contents was defined using listConfig and its click listener was defined through the listeners config, this refers to the boundList element in the scope of the listener. A more simple way to reach the same result:
click:{
element:'el',
fn: function(ev, target) { //listener
var boundList= Ext.getCmp(this.id),
combobox= boundList && boundList.getBubbleParent();
//Do something with the combobox, like changing its value
}
I wasn't sure how to describe my question in the question title. But here is my problem:
(a) When I double click on a row in an Ext.grid.Panel, I open a modal window with it's relavant details to update the record.
(b) After I make the needed modifications and close the modal window, I want to return to the Grid with the Grid filtered on a certain code i.e selectedSalesOrderNum.
jobSlotsGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts){
modalStatus = loadWindow();
jobSlotStore.filterBy(function(rec) {
alert('Filtering data');
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
});
(c) Below is the function, which creates the model window. It also has the call to method submitCreateJobSlotHandler() which basically saves the changes and reloads the original Grid with all the data. ( Hence the necessity to filter it back with a certain code i.e selectedSalesOrderNum ).
function loadWindow()
{
getAllTabsForEditJobSlot();
var createJobSlotWin = new Ext.Window({
id:'salesOrder-win-jobSlot',
applyTo : 'hello-win',
modal : true,
layout : 'fit',
width : 900,
height : 500,
closeAction :'destroy',
plain : true,
model : true,
stateful : false,
title :'Create Job Slot',
items : [editJobSlotInformationPanel],
buttons : [{
text : 'Save',
handler : function(){
submitCreateJobSlotHandler();
//createJobSlotWin.destroy();
}
},{
text : 'Close',
handler : function(){
createJobSlotWin.destroy();
}
}]
});
createJobSlotWin.show();
}
The Issue:
In the first block of code, as soon as the loadWindow method is called, both a modal window is popped up along with the filterBy code getting executed in parallel and showing up the alerts ( 'Filtering data' ). I then enter the data in the modal and save. So, basically, the filtering is not done after the Save/Close on Modal. The code ( if/else ) is immediately reached after loading the modal window. It is as if, the modal window opens and goes to the next line of code while waiting for the user to perform some action on the modal window later.
Hope I am clear on my question. Could anyone please advice how do I handle this?
EDIT:
The more I think about it now, I guess the loadWindow() method just creates the Modal Window as we just have a new Ext.Window() call and doesn't bother about other user actions inside the modal and returns the control. And hence, executes the subsequent filterBy event immediately. In that case, I want to filter the store after I am reloading the store upon the Save in Modal Window. The save on Modal window has this handler code:
function submitCreateJobSlotHandler () {
alert('Into Submit');
var formPanel = Ext.getCmp('salesOrderJobSlotForm');
formPanel.getForm().submit({
url : 'someUrl',
method : 'POST',
success : function() {
alert('Success');
jobSlotStore.load({
scope : this,
url : 'salesOrderJobSlot/listJSON'
});
jobSlotStore.filterBy(function(rec) {
alert(rec.get('salesOrderNum')+"--"+selectedSalesOrderNum)
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
},
failure : function() {
alert('PSO save failed!');
}
});
}
But the issue here is, the jobSlotStore.load() though gets called, it holds until the filterBy gets executed. Because, I see the alerts coming up one by one and then after all the alerts are done, the store loads. So, the filterBy gets overriden by the 'late' store load.
Any suggestions to deal with the issue in any of the ways?
The store load is asynchronous, you need to wait til it completes before you can filter the data set on the client:
store.on('load', function() {
store.filter();
}, null, {single: true});
store.load();
I have my view set up with some events and I want to reference, for example, the button element that was clicked because it has a data attribute I need. I want to do it like so:
events: {
'click #testGadget': 'fireEvent',
...
},
fireEvent: function(){
var x = $(this).data('iCanHaz')
}
But the 'this' variable is scoped to the view itself. I know there's a way to accomplish what I'm looking to do but I can't seem to word my question in a way that returns any google hits.
Can simply be done with the event.target property:
fireEvent: function(e){
var x = $(e.target).data('iCanHaz')
}
see Event Object doc