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;...
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...
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...
Just remove the xtype on the second treecolumn. It will default to gridcolumn, so it will look like a normal grid column.
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...
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....
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] }); ...
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....
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...
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:...
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)) ...
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/...
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:...
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:...
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'}.
The filter function cannot be called just after the load, that's why load in render and filter in viewready (in afterrender it doesn't work either). The problem is solved !! listeners: { render: function() { this.getStore().load(); }, viewready: function() { this.getStore().rightFilter(); } } ...
Bind value, not selection: value: '{allPeople.selection.gender}' Working example: https://fiddle.sencha.com/#fiddle/obm...
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...
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...
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....
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); } } ] ...
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...
The correct way to do it: crcstore.load({ params: { brc_id: 'foo' } }); ...
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...
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....
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....
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...
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...
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'); . . } ...
java,javascript,extjs,ext-direct
1.- The scope parameter that you are passing is not to the backend but to your callback function. (function to execute once the server side responds) 2.- If you want to pass more information to the backend it needs to be passed in an object before the callback function and...
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...
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...
This is the solution. Ext.WindowMgr.getActive().query('button[text=ok]')[0].fireHandler(); ...
Answer found, was an upcase error: Wrong: var prueba = Ext.create('modelo.Nombreclase'); Right: var prueba = Ext.create('modelo.NombreClase'); ...
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();...
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...
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...
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...
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 :...
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...
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...
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...
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....
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",...
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> ...
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...
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...
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...
Just my luck. Found the answer shortly after posting the question. Deleting the filter: 'list' option at my My String column is the solution....
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....
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...
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...
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 }); ...
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', {...
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; } ...
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...
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'); } } } }); ...
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');...
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 } }); ...
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...
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:...
Looks like your selector is wrong. Instead of: 'viewTablaContenido button[action=apagarCapas]' Use (xtype): 'tablaContenido button[action=apagarCapas]' Or (id): '#viewTablaContenido button[action=apagarCapas]' ...
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...
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":...
Add layout: 'auto' to the grid config.
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...
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....
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.
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 }); ...
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. ...
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);...
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...
I was getting all the records because I hadn't call commitChanges on the store after reconfigurer.
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...
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:...
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...
Replace: selectionchange:this.onClick with: selectionchange: 'onClick' ...
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 ?...
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...
Each row in the grid is a model. So, in your leadDev combobox you just need to listen for 'expand' event, then retrieve current row model and apply value from this model to the filter. It should look like this(not checked): Ext.create('Ext.form.ComboBox', { store: store queryMode: 'local', displayField: 'personName', valueField:...
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); ...
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...
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...
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...
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...
Try accessing you controller like this: Ext.ComponentQuery.query('itemsGrid')[0].getController();...
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 ...
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...
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...