Webstorm not ignoring directories marked “excluded”
Folders marked as JavaScript Libraries can't be excluded from indexing. And the WebContent directory is a library folder. Remove this folder from JavaScript libraries (Settings/Languages & Frameworks/JavaScript/Libraries, select your library and press Remove...). You can create a new library and add only those subfolders of WebContent directory you need being...
Loading delay extjs
javascript,extjs,panel,loading,mask
I would suggest you to first show your masking like the way you are doing: var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), { msg:"Please wait..." }); myMask.show(); Then make a delayed task var task = new Ext.util.DelayedTask(function(){ //your loading panel2 with heavy data goes here myMask.hide(); }); //start the task after 500...
Extjs adding a listener to tree panel returns Uncaught TypeError: Cannot read property 'scope' of undefined
Replace: selectionchange:this.onClick with: selectionchange: 'onClick' ...
Extjs : get modified records after store reconfigure
I was getting all the records because I hadn't call commitChanges on the store after reconfigurer.
How to check mark a check column in a grid?
var grid = Ext.ComponentQuery.query('grid[itemId=gridID]')[0]; var view = grid.getView(); var record = view.getRecord({0}); var active = record.get('active'); record.set('active', !active); ...
How can addCls to Button with ViewModel binding in ExtJS5
You have several problems in your code: cls cannot be bound as there is no setCls method - you can bind iconCls if you want you cannot add index after string such as iconCls:'{rating}'[0] - this is syntactically incorrect if you define rating formula like that you have to run...
Sencha architect, I have a form and how to config its `reader`?
Ron, The Form Panel has a reader config that is set to be an object. Edit that object and add the code bellow to it: { type : 'json', root : 'rows', // if ExtJS 5, this should be rootProperty: 'rows' model : 'city' } Shoud look something like this...
Save ajax response to file
Your HTML is not valid for excel. You should need the table tag. To to that you can use the function split : var str = response.split('<table border="1">'); strTmp = str[1].split('</table>'); var html = '<table border="1">' + strTmp[0] + '</table>'; When your html is valid, you can use this code...
Setting multiple events in one ext.net button
javascript,events,extjs,ext.net
Problem solved provisionally . It's working , but I'm not sure about the functioning of the timeout , why this will depend on the server response time. If someone knows a better way, I will apreciate. Thanks! <Click OnEvent="SalvarDados" Success=" #{Store1}.sync(); #{Store2}.sync(); #{Store3}.sync(); #{Store4}.sync(); #{Store5}.sync(); #{Store6}.sync(); #{Store7}.sync(); #{Store8}.sync(); setTimeout(function(){ location.assign('GeraDocumento.aspx');...
Extjs building form on metadata
json,extjs,model-view-controller,dynamic
Surely possible. Basically you use your metadata as items and create the form at any time: var metadata = [ { "allowBlank": false, "fieldLabel": "labelText1", "name": "labelName1", "emptyText": null }, { "allowBlank": false, "fieldLabel": "labelText1", "name": "labelName1", "emptyText": null } ]; Ext.create('Ext.form.Panel', { defaultType: 'textfield', width: 300, bodyPadding: 10, renderTo:...
Uncaught TypeError: binding.destroy is not a function in ExtJs 5
javascript,extjs,mixins,extjs5,bindable
In Ext JS 5, Ext.mixin.Bindable has a new config--"bind"-- which allows bind descriptors to be defined on components. In my component's "bind" method is overwriting this, and so the binding cleanup process is trying to destroy a binding, but doesn't have the proper configuration for it. Commenting "bind" method prevent...
ExtJS 5.0 cellclick event returns incorrect column
The view.getGridColumns() only returns visible columns. Instead I changed it to, the following and this returns all the visible/hidden columns. Ext.getCmp('gridId').columns[cellIndex].dataIndex Thank you @Yellen for the hint....
store.load with parameter ajax call in extjs
The correct way to do it: crcstore.load({ params: { brc_id: 'foo' } }); ...
Override Sencha Touch class
When looking into the Sencha Touch code, I think you would have to add material to the panel's eventedConfig property, because the setters are set as follows in touch/src/Evented.js: for (name in eventedConfig) { if (eventedConfig.hasOwnProperty(name)) { nameMap = ExtClass.getConfigNameMap(name); data[nameMap.set] = this.generateSetter(nameMap); } } You can't influence the eventedConfig...
Increase ExtJS TabBar scrolling speed within TabPanel
Like MarthyM said, override it: Ext.define('Ext.override.layout.container.boxOverflow.Scroller', { override : 'Ext.layout.container.boxOverflow.Scroller', //The number of pixels to scroll by on scroller click scrollIncrement: 400 // increased from 20 }); ...
How to use global functions/Utility Class in EXTJS
A better way would be to declare your class a singleton: Ext.define('MyApp.shared.util.Utilities', { singleton: true, myFunction : function (val, meta, rec) { //do something return val; } }); Ext.define('MyApp.view.MyGrid', { extend: 'Ext.grid.Panel', initComponent: function() { this.columns = [{ text: 'Col1', dataIndex: 'col1' renderer: MyApp.shared.util.Utilities.myFunction }]; this.store = new MyApp.store.MyStore(); this.store.load();...
ExtJs4 Change Field color on Statuscode
Each column of a grid has a renderer config render: function(value, meta, record). So you can check with record.get('status') the current value and add a css style to the given cell. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer Also look at the meta paramenter which grants access to style the specific cell you want....
ExtJs Data Store values empty but Store Raw value populated
Oh well, I just ended up manually setting the data equal to the raw data value in a listener that was waiting for the datachanged event like so: listeners: { datachanged: function() { for(i = 0; i < this.getData().items.length; i++) { this.getData().items[i].data = this.getData().items[i].raw; console.log('New Data ' + i); console.log(this.getData().items[i].data);...
Angular does not recognize the dynamically loaded page in Extjs
javascript,angularjs,extjs,extjs4,angularjs-scope
angular.bootstrap() was the solution. Things you have to care about are: you should nowhere use ng-app you should include jquery explicitly you can put the bootstrap in a panel's afterrender like: listeners : { 'afterrender' : { fn : function (panel, par2, par3) { angular.bootstrap($('#idOfYourAngularCode'), ['A']); }, scope : this...
Extjs : one digit is moving upside
Added the face and working now : Ext.getCmp('number_id').setText('<b><font face="arial" size="2">'+3438+'</font></b>',false); ...
RowExpander for duplicate records in Extjs
I made some research about this problem this year. As I understand the framework, it's impossible to have a nested grid in grid component. Using some hacks, you can only create a read-only subgrid inside rowExpander plugin. (actually, you can create components inside, but you won't catch any events from...
Set variable to function but that function should not get executed
Declare var test outside, then set it inside someMethod1(). Now you can call someMethod2() on a click event and set test to a. var test; someMethod1 = function() { test = "testText"; }; someMethod2 = function() { var a = test; }; ...
CSS Button disabled state?
If you are using ExtJS this will not work. You will have to add a custom class to to your button and then change your CSS to work with ExtJS. Button Definition Ext.create('Ext.Button', { text: 'Click me', renderTo: Ext.getBody(), handler: function() { alert('You clicked the button!'); } }); Ext.create('Ext.Button', {...
Cannot read property 'removeCls' of null for tagfield in ExtJS 5
javascript,extjs,extjs4,extjs5
Got problem with my combo override.Just removed existing combo override, now able to show tagfield. I have forgot that I have combo override in my application. Remember - If you are using tagifled with your existing combo override consider it while upgrading extjs 5 with tagfield....
How to apply style for Ext js xtype tabpanel using style property?
The tab headers are instances of Ext.tab.Tab, which are created dynamically by the tab panel. You can provide a tabConfig configuration on the tab panel's items to customize them, and since they're subclasses of Ext.Component, of course you can also set the style config: items:[{ xtype: "panel", title: "SHOPABLE IMAGES",...
ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities
javascript,html,extjs,codemirror
This can be solved with a few slight tweaks to your code. The key point here is that the behaviour of CodeMirror will vary depending on the type of the first parameter you pass to the CodeMirror constructor. Passing a HTML element (as in your example) will result in the...
How to catch Delete key event in tree panel controller
Use the rowkeydown listener of the treepanel view. Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody(), listeners : { rowkeydown : function(view, record, tr, rowIndex, e) { if (e.keyCode === 46) { console.log('hit delete'); } } } }); ...
Ext.Ajax.request variables
Ext.Ajax.request is asynchrone, which mean it doesnt stop and wait for the return of the request. So your console.log is call before the request return. You have to do this in the "success" callback which is call when the request came back.
ExtJS Load local json file into tree panel
You have a bit messed up json data for your tree. I've simplified your json for better understanding: {"Result":[ { "nombre":"Transporte Marítimo Fluvial ", "id":74, "Result":[ { "id":268, "titulo":"puerto_p_25k", "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", "nombre":"puerto_p_25k", "metadato":"", "wfs":false } ] }, { "nombre":"Entidades Territoriales y Unidades Admin ", "id":65, "Result":[ { "id":239, "titulo":"limite_25k", "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", "nombre":"limite_25k",...
How to Filter store in extjs?
I am not quite sure exactly what you are trying to do, but here is a solution that will change the values of the combo box to a specific subset of the three options. If "Somecondition" is supposed to filter an arbitrary set of data, then I am going to...
what is “root:'data' ” extjs store config
javascript,extjs,proxy,treeview
root property is: The name of the property which contains the data items corresponding to the Model(s) for which this Reader is configured. For JSON reader it's a property name (or a dot-separated list of property names if the root is nested). For XML reader it's a CSS selector. For...
execute function using Ext.Loader.setConfig with ExtJS
Answer found, was an upcase error: Wrong: var prueba = Ext.create('modelo.Nombreclase'); Right: var prueba = Ext.create('modelo.NombreClase'); ...
issue on link with Firefox
Here is the problem: var url = window.location.href; if (url.includes("&activeTabHomeAgregateSite=")) { ... } In the if statement above, you invoke the "includes" method of a String. This method is an experimental technology (as specified in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) and it shouldn't be used, because it is pretty new. Google Chrome has already...
ToolTip in bryntum scheduler
You don't need a listener, just use the tooltipTpl configuration on your Scheduler: tooltipTpl: new Ext.XTemplate('<span>My Tool Tip</span>'), ... It can be a String as well: http://www.bryntum.com/docs/scheduling/3.x/?#!/api/Sch.panel.SchedulerGrid-cfg-tooltipTpl Edit: See the code of this example using tooltips: http://www.bryntum.com/examples/scheduler-latest/examples/performance/performance.html...
Not able to click ExtJS Dropdown button and select list elements - Selenium Webdriver Java
java,selenium,testing,extjs,selenium-webdriver
Try using explicit wait with more precise selectors. By css = By.cssSelector("[placeholder='Please Select a Customer...']"); By option = By.xpath("//li[@role='option'][text()='Customer 2']"); WebDriverWait wait = new WebDriverWait(driver, 10); //Click the dropdown to populate the list WebElement dropdown = wait.until(ExpectedConditions.presenceOfElementLocated(css)); dropdown.click(); //Click the option. Notice the xpath is using the text of the...
Data Model's “serialize” function not called on property “set”ting
Mappings from source content (JSON/XML) to business model (Ext.data.Model) are not automatically created in ExtJS's data model system. As such, another step is needed to produce this relationship using mapping/associationsor something similar. I.e. The data model doesn't store the original JSON to read/write from, which is fine for most cases....
using local storage saved value as a text in a root text
extjs,tree,local-storage,store
Just move the creation of tree store inside initComponent: Ext.define('Eits.view.OrgTreeView', { extend: 'Ext.tree.TreePanel', requires: ['Eits.model.OrgTreeModel'], width: '100%', region: 'center', border: true, initComponent: function() { this.store = Ext.create('Ext.data.TreeStore', { fields : Eits.model.OrgTreeModel.FIELDS, autoLoad: false, root: { id: 'rootNode', objectId : 'rootNode', leaf: false, expanded: false, text: localStorageProvider.get('name'), iconCls: 'mts-Tree-Node', }, proxy:...
Programatically click “ok” on msg box?
This is the solution. Ext.WindowMgr.getActive().query('button[text=ok]')[0].fireHandler(); ...
Setting cell value from SUM of other cells in the same row
javascript,asp.net,extjs,ext.net,gridpanel
Here is a reworked answer for ext.net. You can still use renderer, because it works with the record. If you want to show it only on certain actions, there is a number of ways to do it. Like on mouse hover, you can use overCls to hide the text using...
How to fetch Digits from a String in javascript?
javascript,html,regex,jsp,extjs
You can simply change your regex to this one : var x=xyz.match(/[0-9.]+/g); It will allow you to capture the number and the float as well. => http://www.regexr.com/3b46a...
how to refer to extJS combobox using a string?
I don't know if i understand right, but you want a specific combobox for your editor like xtype: 'combo'? You can define a new xtype based on a combobox which can used as editor: 'data_type_combo. Here is an example fiddle how you could achieve this: https://fiddle.sencha.com/#fiddle/nup...
Using ExtJs Grid on existing HTML page
Just include ext-all.js instead of ext.js. Here is a good read for all possible Ext scripts depending on how you wish to use..Read...
How to best handle multiple related templates in Ext JS?
javascript,extjs,extjs4,extjs4.2
You could add an attribute to the components that all share the same data so that you can query by that attribute. For instance: items:[{ xtype:'panel', tpl: 'template1', custom: 'sharedData' },{ xtype:'panel', tpl: 'template1', custom: 'sharedData' }] And then you can query by that attribute and iterate through the results...
Extjs Cellediting onclick of a button
This is rather simple. I made a small fiddle for you: https://fiddle.sencha.com/#fiddle/ods ExtJS components working like simple object literals, so you can extend them with anything you want. In this case, i added the property "active" which can be checked in the beforeEdit listener....
change button text color in ExtJS
javascript,css,css3,extjs,extjs5
A button is generated with span elements inside. The color need to be changed in span instead in button. Do this way: .mbutton span{ color:red; } ...
OverCls is not working in IE11
javascript,css,internet-explorer,extjs
Replace your css with: .x-btn.x-overDrive, .x-btn.overDrive .x-btn-inner { text-decoration: underline; color: black; } Fiddle: https://fiddle.sencha.com/#fiddle/o5c...
How to using variable when define not using initComponent ExtJs
It is because of javascript closures. In first example this keyword refers to the defined object. ( here is your class instance). In simple words, you should find the closest function wrapper (here initComponent). But in your second example, this refers to the window object which it has not xFile...
ExtJS xtype menu times out in Chrome
If you're using extjs 4.x there is an issue with the Chrome 43 updates and the 4.x series. Here's the bug thread: https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta Here is an announcement with a fix here: https://www.sencha.com/forum/announcement.php?a=58 Here's the official fix: Ext.define('Override.menu.Menu', { override: 'Ext.menu.Menu', compatibility : '4', onMouseLeave: function(e) { var me = this;...
Extjs xml reader not working
Without the rest of the code, I can't tell you the error. Here is a working example using the data you provided. Compare it with your code, maybe you can find the problem....
Extjs Progressbar in span/div is not correct
If we want to render extjs widget in costum DOM-element, necessary use option "renderTo" to exist DOM-element in DOM-tree. For example: var span = $("<span>").attr("id", this.getId()); $(span[0]).appendTo("exist-element"); Ext.create("Ext.ProgressBar", { renderTo: $("#" + id)[0], value: chartCase.key / 100, width: 100 }); ...
Get values from grid cell?
you can use the get method to obtain the value of a specified field in the model ie: grid.getStore().data.items[0].get('first_name') Here is a fiddle demonstrating...
ExtJS - get values from form (based on login app tutorial)
Inside onLoginClick function you have access to the form via me.up('window').down('form').getForm() which can be used as an ajax call (or submit of the form) to verify the user: onLoginClick: function(me) { var form = me.up('window').down('form').getForm(); if (form.isValid()) { form.submit({ url: 'checkcredentials.php', // your url params: null, // needed for additional...
How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?
javascript,extjs,extjs5,sencha-architect,extjs-grid
The way I do it is quite simple. Just add the mapping attribute to the model this way: { name: 'product.description', type: 'string', mapping : 'product.description' } No need for renderer....
How to migrate a non sencha cmd application to build using sencha cmd (ExtJS 4.2)
First of all you need to download Sencha ExtJS and Sencha CMD. After that you need to install Sencha CMD. Generation ExtJS Build: run terminal; sencha -sdk /path/to/extjs-5.x.x generate workspace my-workspace cd my-workspace sencha -sdk ext generate app NameApp name-app cd name-app sencha app build Also, if you want to...
How could I dynamically choose a div class with an if-else statement?
var tpl = new Ext.XTemplate( '<div class="', '<tpl if="AVAILABLE_QTY > 0">', 'summary-qty-style-red', '<tpl else>', 'summary-qty-style-green', '</tpl>', '">{AVAILABLE_QTY}/{QTY}</div>' ); console.log(tpl.apply({AVAILABLE_QTY: -1, QTY: 5})); console.log(tpl.apply({AVAILABLE_QTY: 1, QTY: 5})); outputs: <div class="summary-qty-style-green">-1/5</div> <div class="summary-qty-style-red">1/5</div> ...
Filtering Array within a store record
Use the addFilter function in your controller: combo.getStore().addFilter({property: 'yourProperty', value: 'valueToFilter'}); For more info: http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store-method-addFilter...
Want to prevent user from entering any space in textfield by providing error when he does
Use maskRe property: An input mask regular expression that will be used to filter keystrokes (character being typed) that do not match. Note: It does not filter characters already in the input. maskRe: /[A-Za-z0-9\-_]/ Working example: https://fiddle.sencha.com/#fiddle/o4b...
button click issue in Ext js
There are two solutions to do that : 1st : use a Ext.form.Panel with all your textfield and your button inside. The allowBlank : false property will check if your texfields are empty and if they are the button will stay disabled if it's got the property formBind : true....
Using script in an external html in Extjs
javascript,jquery,html,extjs,extjs4
The autoLoad config is deprecated. Use loader instead. var test = Ext.create('Ext.panel.Panel', { title : 'Example 1', width : 250, height : 250, frame : true, loader: { url: './test.html', autoLoad: true, scripts: true } }); ...
Fade in /Fade out in Ext.window
This should do it: var modalWindow = new Ext.Window({ title: "Window", width: 400, height: 300, html: "<div id='example'>Hello</div> ", listeners : { show : function(window) { window.getEl().setOpacity(0); window.getEl().fadeIn({duration: 2000}); }, beforeclose : function(window) { if(!window.shouldClose) { window.getEl().fadeOut({duration: 2000, callback: function() { window.shouldClose = true; window.close(); }}); } return window.shouldClose ?...
ExtJS and buttons
Try using the property hidden: true. And for changing the state after it is rendered use the functions .hide(), .show() or if you want to use the same function for both .setHidden(boolInput) where boolInput is true if you want to hide the button, and false if you want to show...
TypeError: data is null while remote filtering on Ext JS 5.1
Just my luck. Found the answer shortly after posting the question. Deleting the filter: 'list' option at my My String column is the solution....
How can I fire a function in viewcontrol from map event in ExtJS?
Try accessing you controller like this: Ext.ComponentQuery.query('itemsGrid')[0].getController();...
calling the parent controller function in Ext.Ajax.request
Scope issue. When you call this in the success callback, you're not at the same scope where the startMain function is defined. One solution is to declare a reference to the correct scope right inside the doLoginClicked function: doLoginClicked : function () { var me = this; console.log("button pressed this...
ExtJS: What are the only required files for grid?
if you for some reasons don't want to use sencha cmd, the only required files are build/ext-all.js packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css packages/ext-theme-neptune/build/ext-theme-neptune.js ...
ExtJS Sequence Layout
Improving on Evan's answer, you can do something like this - Ext.widget({ renderTo: document.body, xtype: 'container', width: 300, items: [{ xtype: 'component', autoEl: 'p', // use paragraph instead of span html: 'This should look ' }, { xtype: 'component', autoEl: 'p', html: 'like a single sentence.' }] }); Setting autoEl:...
ExtJS 5 textfield bug (Chrome)
It's a known bug for chrome. Take a look here for the workaround: https://www.sencha.com/forum/showthread.php?301227-Visual-combobox-bug-in-Chrome-43.0.2357.65-m&p=1101244&viewfull=1#post1101244...
Ext.device.filesystem.FileEntry.read() - type: “text” returns blank file
Changing the encoding to 'UTF-8' does the trick. So, working code is below: fileEntry.read({ //type: "binaryString", type: "text", encoding: "UTF-8", success: function(fileData) { console.log('--- fileData'); console.log(fileData); console.log('//--- fileData'); self.onUploadJSONSuccess(fileData, fileName, networkId, activityId, section, showWaitScreen, callback); }, failure: function(error) { if(showWaitScreen) { console.log('Failed to read file: ' + error); Ext.Msg.alert('Failed to...
ExtJs component cleanup
This guide may be a good read. You should always consider cleaning up your objects after they are needed to free up memory, especially unbinding event listeners and any timers you've created with setInterval. Once the object reference is destroyed you cannot access it but it could still be listening...
ExtJS 5: Complex grid data - set column editor value
I was able to solve this by using the setEditor method (on the column) when the row is clicked: Ext.application({ name : 'Fiddle', launch : function() { Ext.define('Phone', { extend: 'Ext.data.Model', fields: [ {name: 'phone', type: 'int'}, {name: 'type', type: 'string'} ] }); Ext.define('Person', { extend: 'Ext.data.Model', fields: [ {name:...
ExtJS Tree panel not show elements correctly
TreePanel works fine only if all your nodes have a unique 'id' property. In your JSON file, we can see that "Recursos hídricos" node, "Minero Energético" and "Cobertura y uso" have the same id : "nombre": "Recursos hídricos", "id": 2 "nombre": "Minero Energético", "id": 2 "nombre": "Cobertura y uso", "id":...
How to change value of “disableSelection” of a grid in Ext js 4.0 dynamically?
If you're wanting to disable selection of the grid rows (such as in a checkbox selection model) you can use: xxx.getSelectionModel().setLocked(true); To enable selection just use the reverse: xxx.getSelectionModel().setLocked(false); Please see this fiddle for an example: https://fiddle.sencha.com/#fiddle/nf8...
EXTJS tree panel disable selection change
javascript,extjs,selection,treepanel
You can use setLocked to disable other selections: treepanel.getSelectionModel().setLocked(true); If you want to enable selections you can just use the reverse: treepanel.getSelectionModel().setLocked(false); I have an example here using ExtJS 4.2.1: https://fiddle.sencha.com/#fiddle/nqf...
ExtJS Remove item of a store
You can use the store function find(fieldName, value) to get the index of a model, and then call removeAt(index). storeV.removeAt(storeV.find('idCapa', idCapa)) ...
ExtJS 5 html in combo inputfield
Please try this FIDDLE The idea is to override the displayTpl template. Note: I've used .unwrap() function of Jquery in this solution. Ext.define('Mycombo', { extend: 'Ext.form.field.ComboBox', alias: ['widget.myCombo', 'widget.combos'], initComponent: function() { var me = this; me.displayTpl = new Ext.XTemplate( '<tpl for=".">' + '{[typeof values === "string" ? values :...
I cannot get component from controller in ExtJS
Your selector is not the problem. Add enableKeyEvents: true to your combobox if you'd like the keypress event to be fired. See the keypress event documentation: This event only fires if enableKeyEvents is set to true. ...
ExtJS Access a controller by the view
Looks like your selector is wrong. Instead of: 'viewTablaContenido button[action=apagarCapas]' Use (xtype): 'tablaContenido button[action=apagarCapas]' Or (id): '#viewTablaContenido button[action=apagarCapas]' ...
Ext JS 5 Data Binding Combobox
Bind value, not selection: value: '{allPeople.selection.gender}' Working example: https://fiddle.sencha.com/#fiddle/obm...
how to add tooltip to widget in extjs?
listeners : { render: function(p) { var theElem = p.getEl(); var theTip = Ext.create('Ext.tip.Tip', { html: name, margin: '0 0 0 200', shadow: false }); p.getEl().on('mouseover', function(){ theTip.showAt(theElem.getX(), theElem.getY()); }); p.getEl().on('mouseleave', function(){ theTip.hide(); }); } } I found the solution, adding this listener help me to add tooltip...
Extjs 4.2.2 - Default sorter logic runs instead of custom sorter
sorting,extjs,datagrid,extjs4.2
You should use the sortType configuration in your model's field definition, i.e. a function that returns the value used for sorting. Example configuration: fields: [ // ... other fields ... { name: 'AbsChange', sortType: function(value) { return Math.abs(value); } } ] ...
Extjs create form items with json store
Within your view you'll need to create a function that matches the form.reconfigure(store, meta.data) call you are making in your controller. And in that function you can call the form's add function to add items to the form. As you are already supplying the xtype and configuration parameters in the...
Unable to listen to load event in the controller
It is done like this: http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.app.Controller-cfg-stores Write your own getter: Ext.define("MyApp.controller.Foo", { extend: "Ext.app.Controller", requires: [ 'MyApp.store.Users', 'MyApp.store.Vehicles' ] getUsersStore: function() { return this.getStore("Users"); }, getVehiclesStore: function() { return this.getStore("Vehicles"); } }); Or shorter Ext.define("MyApp.controller.Foo", { extend: "Ext.app.Controller", stores: ['Users', 'Vehicles'] }); => you can use de storeId, or fullName...
ExtJS: Rendering an image to an existing div
All you need is the renderTo config. Ext.create( 'Ext.Img', { ... renderTo: 'someDivId' // you can use IDs directly, HTML elements and Ext elements } ); Documentation: http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.Img-cfg-renderTo...
ExtJS - row renderer - if cell has certain value, highlight entire row
Set getRowClass (on your grid) instead of the column renderer: Override this function to apply custom CSS classes to rows during rendering. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping element. For example: viewConfig: { getRowClass:...
How to run “sencha app watch” without a webserver
You can switch off the web server. Go to the sencha.cfg file located at <App name>\app\.sencha\app and put at the bottom of the file: skip.web.start=true or skip.web.start=1...
Add an array to a json object in extjs
javascript,arrays,json,object,extjs
To get the data from the EXT JS store var data = Ext.getStore("Your_Store_Name").data In my snippet below I am assuming that you like to get the values from field name called item. var data = Ext.getStore("Your_Store_Name").data //imagine your JSON where you need to store is in variable myJSON if (data.items.length...
extjs Possibility of using grid widgets in custom elements
Solved me. For example: Ext.create("Ext.widget", { xtype: "sparklinebox", // xtype: "sparklineline" // xtype: "sparklinepie " // xtype: "sparklinediscrete" // xtype: "sparklinebar" // xtype: "sparklinebullet" // xtype: "sparklinebox" // xtype: "sparklinetristate" renderTo: 'dom-element-id' height: 20, width: 10, values: [1, 2, 3, 4] }); ...
ExtJS Find the id of an element
Add this listener to your controller: Ext.define('Fiddle.controllers.MyController',{ extend : 'Ext.app.Controller', alias: 'controller.mycontroller', init : function() { this.control({ "slider" : { change : function (slider, newValue, thumb, eOpts ) { var capa = this.buscarcapa(slider.record.get('id')); if (capa) capa.setOpacity(thumb/100); }, blur: function(slider, event, eOpts) { slider.setVisible(false); } } }); }, buscarcapa : function...
ExtJS 5 - Customize Icon for selectedItem in a ComboBox
Try using the itemTpl property, like: listConfig: { itemTpl: '<div class="smile">{enumValue}</div>' } And use some css like: .x-boundlist-item-selected .smile:before { content: ""; width: 16px; height: 16px; background-image: url('images/smiley.gif'); . . } ...
Sencha/Extjs rest call with all parameters
You need to specify a writer config on your proxy with writeAllFields: true. By default it's false, and the default writer itself is just {type: 'json'}.
ExtJS grid emptyText not visible in panel with vbox layout
Add layout: 'auto' to the grid config.
How to achieve the following in extjs
Ext.create('Ext.panel.Panel', { bodyPadding: 5, layout : { align : 'center', pack : 'center', type : 'vbox' }, width: 300, height: 300, title: 'Title', items: [{ Your ExtJs Content }] }); I think it's not really hard to find this answer via Google ... Edit : link to JSFiddle : http://jsfiddle.net/tub2506d/1/...
Showing context menu in controller
This is a sample code to open a context menu (This will give you some idea): itemcontextmenu: function(view, record, item, index, e, eOpts) { var position = e.getXY(), menu = Ext.create('FilesEditor.view.FilesEditorContextMenu', { id: 'myMenu', items: [{ text: 'Some Menu Item', handler: function() { // do your stuff } }], listeners:...