extjs,extjs4.2 , How do I know at runtime what event listeners are registered to a component in ExtJS?


How do I know at runtime what event listeners are registered to a component in ExtJS?

Question:

Tag: extjs,extjs4.2

I'm trying to debug an issue I have with an event being fired two times. I'm just curious and want to know if there is any way I could know how many event listeners are registered to a component at runtime.

Say for example I have a button, and using some code in the browser's console I'm able to see all the event listeners attached to the button. Any ideas?


Answer:

I found a way of doing it, may not be elegant but worked for me. The only requirement is to have at least a portion of the selector query, works well if you give an itemId.

Just execute the following function, passing an itemId as selector.

>> function showListeners(selector) {
     var regexp = new RegExp('(^|\\s)'+selector+'(?=\\s|$)'), 
     bus = Ext.app.EventDomain.instances.component.bus;

     for(var i in bus) {   
       var selectors = Object.keys(bus[i]);
       for(var j in selectors) {
         if(regexp.test(selectors[j])) {
           console.log("selector: '" + selectors[j] + 
                       "'\n on -> " + i + " : " + Object.keys(bus[i][selectors[j]])[0]);
         }
       }
     }
   }

>> showListeners('#wizardWindow')

That will return something like this (just an example):

> selector: '#mainContainer #wizardWindow'
  on -> beforerender : home.WizardController
> selector: '#mainContainer #wizardWindow'
  on -> afterrender : home.WizardController

It will basically tell which controller has an event listener registered for the given component (if found).

I hope someone finds this useful.


Related:


Loading delay extjs


javascript,extjs,panel,loading,mask
I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the...

Want to prevent user from entering any space in textfield by providing error when he does


javascript,regex,extjs,qtip
I have a textfield in Extjs. This textfield can only contain Digits 0 - 9 Alphabets a-z or A-Z Characters like _ (underscore) and - (hyphen) I want to prevent the user from entering anything apart from these characters. As such I wish to display an error, something like a...

Showing context menu in controller


extjs
I have two views - one for tree panel and one for context menu (defined as FilesEditor.view.FilesEditorContextMenu). And I have a controller, in which it listens to itemcontextmenu event. I do not know how should I create (where and at what stage?) and how to show my FilesEditorContextMenu. The part...

ExtJS Direct--pass scope to method


java,javascript,extjs,ext-direct
I'm using the ExtJS Direct proxy and need to know how to pass scope when calling a method. Currently im doing this myapp.direct.action.mygridservice.getGridData("123",this.getSearchCbo().getValue(), function(p_,resp_){ //do something }, this); on the java method I added a third param for scope with type String but i still get an error that "this"...

using local storage saved value as a text in a root text


extjs,tree,local-storage,store
I have a treeView in my extjs View, in which I need to give the the value of a local storage variable as the root name.The value to the local storage is fed when user logins successfully : Ext.define('Eits.view.OrgTreeView', { extend : 'Ext.tree.TreePanel', requires: ['Eits.model.OrgTreeModel'], width : '100%', region :...

How to achieve the following in extjs


extjs,layout,header,panel
--Title------------------------------- | | | | | <Content> | | | |_____________________________________| How to achieve the above panel in extjs? Edit: It should look something like this: http://oi57.tinypic.com/eiw49.jpg...

How to using variable when define not using initComponent ExtJs


extjs
I have a question when defining 1 panel. Ex1: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", // Init initComponent: function () { Ext.apply(this, { items: [ { xtype: 'button', action: 'file', text: this.xFile // Using variable here } ] }); this.callParent(); } }); Ex2: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", items:...

How could I dynamically choose a div class with an if-else statement?


javascript,extjs,sencha-touch
I use Ext.XTemplate to show my data in a list and I want to realize a function that when I get a positive number, it show as red and green when negative. To realize this function, I create two style and I want to pass parameters to dynamically create template...

ToolTip in bryntum scheduler


extjs
I am new to Extjs. I am using bryntum scheduler in my application. In that I want to show tooltip over scheduled item. I checked with bryntum api and found that I can use tooltipTpl to show tooltip and tipCfg to configure it. I added eventmouseenter listener and in respective...

How can addCls to Button with ViewModel binding in ExtJS5


javascript,extjs,mvvm,extjs5
I want to change css class after binding. Is it possible in ExtJS5? I added to comments. fiddle: https://fiddle.sencha.com/#fiddle/olc...

Uncaught TypeError: binding.destroy is not a function in ExtJs 5


javascript,extjs,mixins,extjs5,bindable
I am using Ext.util.StoreHolder mixin in my extjs 5.1 view.I found problem with Ext.destroy() method which throws error while destroying view having bindable mixin Ext.util.StoreHolder. I can not destroy that view, it giving me error Uncaught TypeError: binding.destroy is not a function at Ext.define.privates.removeBindings My view is using mixin: mixins:...

Filtering Array within a store record


javascript,arrays,json,extjs
I have a JSON object in a store that looks like the below. I am dynamically filtering values based on selections in a property grid. I am not filtering on the top level values (personName, primaryRole etc) but instead I want to drill down into the array of periods I...

CSS Button disabled state?


css,extjs
I am new on CSS, How should I define my CSS class for catch button's disabled state? There is my CSS class but it didn't work. .mbutton:disabled{ background: transparent; } EDIT There is JSfiddle example, http://jsfiddle.net/sefiktemel/v7h9gczu/...

Extjs Cellediting onclick of a button


javascript,extjs
I have activate button on each row of grid so users can activate only the row they want to edit and the button changes to deactivate.how can I save status of the buttons for next time I reopen the panel? below is my code and also: https://fiddle.sencha.com/#fiddle/ofp Ext.application({ name :...

Extjs building form on metadata


json,extjs,model-view-controller,dynamic
I will build a FormPanel with ExtJs 4 configured by metadata received from server. The meta data (json array) looks like this: { "metaData": { [ { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" }, { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" } ] }, "success": true,...

Override Sencha Touch class


javascript,extjs,sencha-touch
I am working in a Sencha Touch application and I have the next doubt/issue with this code. Ext.each(records, function(record){ newItem = Ext.create('Ext.Panel', { material: record.get('material'), cls: 'setitems-item', tpl: '<div class="setitems-item-material">{material}</div>' + '<div class="setitems-item-atpstatus {atpstatus}">{cquantity}</div>' + '<div class="setitems-item-cdd">{[Cicero.Helper.formatSAPdate2Str(values.cdd)]}</div>' + '<div...

button click issue in Ext js


extjs,logic
i have small query i created four text fields and one button,in text fields i gave property allowblank:true if user enter shows error message,it's working perfect.If the click the button the inserted perfect,after that the textboxes becomes empty it's showing blank errormessage.If iam using Allowblank:false it's working fine.but i require...

Setting multiple events in one ext.net button


javascript,events,extjs,ext.net
I have a form with some grids and fields. When I click on submit button, I need to send all information do database. After that, I need to redirect to other page. Actually, my code appears as so, but the redirect event is not firing. <ext:Button runat="server" Text="Finalizar" Width="150" ID="Button1"...

Ext.device.filesystem.FileEntry.read() - type: “text” returns blank file


extjs,filesystems,device
I am facing a problem with Ext.device.filesystem.FileEntry.read() method. When I try to read the text/JSON file as text, I get a blank file. Any idea? Looks like readastext method of extjs file reader is buggy. Following does not work: var fileEntry = new Ext.device.filesystem.FileEntry(newFilePath, fileSystem); fileEntry.read({ //type: "binaryString", encoding: 'UTF8',...

execute function using Ext.Loader.setConfig with ExtJS


javascript,extjs,extjs5
Im trying to create a path with ExtJS using Ext.Loader.setConfig, im following the example from Api Docs but every time i try to execute the method holaMundo not works and not show any error. This is the code of NombreClase.js in js/pruebapath/miprueba/ Ext.define('js.pruebapath.miprueba.NombreClase', { constructor : function () { return...

Ext JS Dashboard Layout and maximize/minimize panels


extjs,layout,dashboard,extjs5,panels
I'm attaching a picture with the mock up that I'm trying to develop with Ext JS. I'm using a Border layout, and then a Dashboard for the central part, however I see some limitations on it: Panels in the dashboard don't have minimize or maximize button. How can I implement...

change button text color in ExtJS


javascript,css,css3,extjs,extjs5
I need to change text color of my button. I defined a css class like; .mbutton{ background:transparent; color:red; border:none; } and button definition is here; Ext.create('Ext.Button', { renderTo: Ext.getBody(), text: 'Red text', cls:'mbutton' }); fiddle: https://fiddle.sencha.com/#fiddle/olj...

RowExpander for duplicate records in Extjs


extjs,extjs5
I have a grid in Extjs and I want to add rowExpander on a condition, The condition is: If there is more than one record with same ID in store, then only one record will be visible in grid, but a rowExpander(plus icon) will be added with the record, And...

Extjs create form items with json store


json,extjs,extjs4,extjs-mvc
I have created a form panel view and I will create some form items iside this panel. The communication to the store, controller and model works fine but how can I create the items in the view? Json array (retrieved from external service): { "data": [ { "name": "ff", "xtype":...

ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities


javascript,html,extjs,codemirror
Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing. I have searched through the web and found the Javascript API CodeMirror. I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the...

ExtJS Remove item of a store


javascript,extjs,extjs5
In a extjs app I have a tree panel that reads an json file, in the tree panel i have a check box that execute an action, additionally I save the checked element in a grid panel of a tab panel... I want to remove any element of the store...

Extjs xml reader not working


extjs,xmlreader
I have the following XML Configuration... <?xml version="1.0" encoding="UTF-8"?> <Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="IncidentMgt"> <EntityType Name="in"> <Property Name="persistent_id" Type="Edm.String" Nullable="true" MaxLength="30"/> <Property Name="active_f" Type="Edm.Int32" Nullable="true"/> <Property Name="add_property_persids" Type="Edm.String" Nullable="true"/> <Property Name="add_workflow_persids" Type="Edm.String" Nullable="true"/>...

ExtJS Find the id of an element


javascript,extjs,extjs5
I have an app with the MVC model, in the view I create a slider with the listeners, but I want that the listeners are in the controller class, and I want to get the id of the element, but it is generated by a variable from a tree panel.......

calling the parent controller function in Ext.Ajax.request


extjs,view,controller,scope
I have a login Page which authenticates the user.On correct username and password it should hide the loginview and display the next view.When I call the function to do the same it gives an error saying "Uncaught TypeError: this.functionname is not a function.Here is my code for the same: startMain...

Sencha architect, I have a form and how to config its `reader`?


extjs
Sencha architect, I have a form and I want to config its reader like this, Ext.create('Ext.data.JsonReader', { root : "rows", model : 'city' }) In Sencha architect, it will be add a pair of single quote mark. So how to config reader of the form?...

How to apply style for Ext js xtype tabpanel using style property?


javascript,css,json,extjs
I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : '#C81820' } } I want to change the style of tab-panel's header by writing css like this in...

ExtJS grid emptyText not visible in panel with vbox layout


extjs
I'm using Ext JS 5.1.0. If I create a grid in a vbox layout with no records, the emptyText is rendered in the DOM, but the height of the grid is calculated incorrectly and the text is not visible. Is there a way to get it to automatically grow without...

extjs Possibility of using grid widgets in custom elements


javascript,jquery,extjs
Is it possible to use these widgets http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#widget-grid in costum elements div/span, not in a panel? I know only about Progressbar: Ext.create("Ext.ProgressBar", { renderTo: costumSpan[0], value: .5 }); What about others?...

Save ajax response to file


javascript,ajax,extjs
Let's assume I have following button code: Ext.create('widget.button', { handler: function () { Ext.Ajax.request({ method: 'POST', url: 'index.php?r=store/exportXLS', params: { queryName: me.exporting.name, queryGroups: Ext.JSON.encode(me.exporting.groups) }, success: function (response) { //??? } }); }, dock: 'top', text: 'Экспорт в XLS' }); Because groups variable hold too much parameters, I must send...

ExtJS - row renderer - if cell has certain value, highlight entire row


html,extjs
If the column cell value is > 5000, I want to highlight that entire row. Right now I am only able to highlight that cell. Grid column renderer: renderer:function(val_, meta_, rec_) { if(val_> 5000) { meta_.style = "background-color:red;"; } } ...

How to catch Delete key event in tree panel controller


extjs
I have a tree panel view (defined as FilesEditorNavigTree) and a controller. In a controller I want to catch Delete key event in order to perform some procedure. I tried to do it like this: ... init:function(){ this.control({ 'FilesEditorNavigTree':{ specialkey:function(a, b){ alert(b.keyCode); // just for testing reasons } But it...

Not able to click ExtJS Dropdown button and select list elements - Selenium Webdriver Java


java,selenium,testing,extjs,selenium-webdriver
I am having difficulty in clicking a drop down and selecting option from the list. Below screenshot of the application. Our application uses heavy ExtJS and below is the HTML code for dropdown button and textbox. <div id="combobox-1115-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" role="presentation" style="width: 325px;"> <div id="ext-gen1273" class="x-hide-display x-form-data-hidden" role="presentation"></div> <input id="ext-gen1272"...

How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?


javascript,extjs,extjs5,sencha-architect,extjs-grid
I've got an incoming array of Offering objects that looks like this: [{ "id" : 16, "price" : 500, "quantity" : 2000, "denomination" : "case", "denominationPlural" : "cases", "product" : { "id" : 14, "description" : "This is the text description for product 14." } }, { "id" : 18,...

Ext.Ajax.request variables


javascript,php,ajax,extjs
I want to access to some variable(datoslicitproduct) that I declared out ot an Ext.Ajax.request, but I initialize it inside the request. I have this function : function ExportarExcelproddet(){ var datoslicitaciones = []; var datoslicitproduct=[]; var datafinal; var fila=[]; var fila2=[]; var Tipo; var IdPliego; ExpGridstore.each(function(r){ fila.push(r.data['Tipo']); fila.push(r.data['IdTxt']); fila.push(r.data['Id_Exp']); fila.push(r.data['Exp']); fila.push(r.data['Org']);...

Using ExtJs Grid on existing HTML page


extjs,extjs5
I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my...

Unable to listen to load event in the controller


extjs,model-view-controller
I scanned many threads here at stackoverflow (this and this), but none of them helps me to solve my problem. So, I have a store which is defined like this: Ext.define('fileseditor.store.fileseditorNavigStore',{ extend:'Ext.data.TreeStore', ... I've heard about getters and tried to do this in my controller: init: function(){ this.getfileseditorNavigStoreStore().addListener('load', this.finishedLoading, this);...

Extjs adding a listener to tree panel returns Uncaught TypeError: Cannot read property 'scope' of undefined


extjs
I am trying to add a selection change listener on a tree panel but i get the following error: Uncaught TypeError: Cannot read property 'scope' of undefined code follows: xxx.view.trees.MainTree.js extend: 'Ext.tree.Panel', requires: [ 'xxx.store.TreeStore' ], xtype: 'main-tree', height: 400, width: 350, title: 'Tree', useArrows: true, initComponent: function() { Ext.apply(this,...

ExtJS: What are the only required files for grid?


extjs,extjs5
I have a .net application in which I have used ExtJS grid on only one page. I have included the complete EXT folder in my application that has increased the application size to a considerable amount. I am populating the grid in Ext.onready function and currently the requirement of ExtJS...

ExtJS 5 html in combo inputfield


extjs,extjs5
I have a combobox with html values. Selected value in inputfield displaying with html tags: Fiddle here How to display value without html tags? Thanks....

Ext JS 5 Data Binding Combobox


extjs,mvvm,binding,extjs5
I have an Ext JS 5.0.1 application that I am working on. I have a simple window with a grid and a form. I have the grid bound to my store and when a row is selected, all the textfields in the form bind, but I also have a combobox...

Angular does not recognize the dynamically loaded page in Extjs


javascript,angularjs,extjs,extjs4,angularjs-scope
I have a SPA in Extjs system. I have also included angular and the necessary modules which i want to use on a page (external html referred in a panel of extjs). Angular is defined in and working everywhere except in newly loaded page.The problem is that i have to...

Sencha/Extjs rest call with all parameters


json,rest,extjs,sencha-touch
I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields. When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server....

ExtJS5 Store filter “Uncaught TypeError: Cannot read property 'get' of undefined”


extjs,extjs5
I'm using the gpl version of extjs5.1.1 without sencha cmd. In my application a Grid displays correctly a Store. In the window, there is a checkbox wich code is : { xtype : 'checkbox', itemId : 'employeeFilter', value : false, boxLabel : 'Show inaktiv users', margin : '0 5 0...

Extjs Progressbar in span/div is not correct


javascript,jquery,css,extjs
I want to render component progress-bar in my span and insert it in text/tooltip/cell etc. Then I render progressbar in body: Ext.create("Ext.ProgressBar", { renderTo: Ext.getBody(), value: chartCase.key / 100, width: 100 }); Style for "x-progress-text" taking the width of component (100px in this case), so it is center-justified. Then I...

what is “root:'data' ” extjs store config


javascript,extjs,proxy,treeview
I am very new to ExtJs and I have the following code for a treeView,,which has a default root in the beginning and then an Ajax call to a servlet .But i don't understand the 'root' field with value 'data' .Is data an alias or xType .Here is the code:...