extjs4.2 , How to use plugins in Extjs

How to use plugins in Extjs


Tag: extjs4.2

I am finding it very difficult to use 'Ext.ux.TabReorderer' as a plugin in tab panel

    extend: 'Ext.tab.Panel',
    alias: 'widget.board',
    plugins: ['Ext.ux.TabReorderer'],
        title: 'Tab 1'
        title: 'Tab 2'

This was throwing an console error saying:

Cannot read property 'init' of null

Upon further investigation found that there is no folder called 'ux' in my extjs. Also a quick search showed me that there is a file named 'Ext.ux.TabReorderer.js' in 'extjs\docs\output' folder.

This is confusing me, how do I add this plugin to my tab panel ?


After going through the link provided in the comments by DSF

I added Path in app.js

    enabled: true,
    paths: {
        'Ext.ux': './app/ux'

Also changed the tab panel to include


It is now giving me new errors :

1) Uncaught TypeError: Ext.data.JsonP.Ext_ux_TabReorderer is not a function (TabReorderer.js)

2) Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.ux.TabReorderer'. Please check the source code of their corresponding files for possible typos: './app/ux/TabReorderer.js (ext-all-dev.js)


I was finally able to fix it.

I moved TabReorderer.js from extjs\docs\output folder to extjs\src\ux.

The reason this didn't work earlier was because I was providing a class name inside the plugins array.

plugins: ['Ext.ux.TabReorderer']

Where it should have been an instance of that class, as shown below

plugins: [Ext.create('Ext.ux.TabReorderer')]

Another way to add plugins would be to use a ptype. For example

plugins: [{ptype: 'cellediting'}]

One can find a list of all the ptypes in Sencha docs

Unfortunately there is no ptype for TabReorderer, so had to stick with Ext.create().

For further reading



how to add click event to inner element of Xtemplate extjs 4.2?

I want to add click event to inner element of Xtemplate, below is my code. Thanks in advance. var ruleTemplate = new Ext.XTemplate( '<tpl for=".">', '<div class="rule-item" id={key}>', '{key}', '<tpl if="value == \'true\'">', '<i class="add">&nbsp;</i>', '<tpl else>', '<i class="group">&nbsp;</i>', '</tpl>', '</div>', '</tpl>' ); var ruleView = Ext.create('Ext.view.View', { store: rulesStore,...

form.submit not working while file upload in ExtJS

I am using ExtJS 4.2.0 for uploading file functionality. But when i try to upload using form.submit(), it gives me an ExtJS error and the service is not called. Below is the code for the form panel: Ext.define('modelname.view.AttachDocumentPanel', { extend: 'Ext.form.Panel', alias: 'widget.attachdocumentpanel', id: 'attachdocumentpanel', itemId: 'attachdocumentpanel', name: 'attachdocumentpanel', height:25,...

how to make simple paging extjs4

Good day everyone, I'm new user to Extjs 4. Right now, I have a problem in creating a simple paging (a test run just to familiarized on this). Please take a look at the example below. //creating a store data first var itemsPerPage = 2; var productivity = Ext.create('Ext.data.Store',{ fields...

How to make a CSS-based Extjs layout for containers?

Basically, what I need is a container that just renders its items as inline divs - e.g.: Ext.widget({ xtype: 'container', cls: 'my-container', defaultType: 'component', items: [ { autoEl: { html: 'One' } }, { autoEl: { html: 'Two' } }, { autoEl: { html: 'Three' } } ] }) Should...

Row column selected extjs

I need to provide a specific css for a column in a extjs grid. I define this renderer function: render_alarm_color: function (value, metadata, record, rowIndex, colIndex, store){ metadata.css = 'alarm-'+record.data.alarm; return value; } The css rule that are associated to that column is for example: .alarm-0 {color:#FFFFFF; background:#FF3D4A !important;} .alarm-1...

ExtJs dropdown list with two color rows

I have ExtJs combo drop down list. I want to two-color(odd as red and even as green)row list when combo is span Note: single row has multi(more than one line) lines Is this possible with ExtJS 4.2? if yes how can i do that. { xtype: 'combobox', id: 'mycbo', itemId:...

How to use plugins in Extjs

I am finding it very difficult to use 'Ext.ux.TabReorderer' as a plugin in tab panel Ext.define("practical.view.Board",{ extend: 'Ext.tab.Panel', alias: 'widget.board', plugins: ['Ext.ux.TabReorderer'], items:[{ title: 'Tab 1' },{ title: 'Tab 2' }] }); This was throwing an console error saying: Cannot read property 'init' of null Upon further investigation found that...

Extjs : get modified records after store reconfigure

I reconfigure my store and add new fields to it and then load its corresponding grid. I need to edit grid cells and save the whole modified grid rows in one step at the end. The problem is that when I call this code, I get all rows in the...

How to find nth child nodes in ExtJS 4.1 tree panel

Please check the following fiddle. I have a node named Grand Parent, this node has two child: Child Node & Child Two. When user clicks on Grand Parent node, I want to go down till the last node in the hierarchy and update one of the property in each node....

ExtJS 4.2.0 gridpanel inside viewport rendering extra column

I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here is my fiddle:('ct' is nothing but just a div) http://jsfiddle.net/5zpx4556/ Ext.define('SimpleGrid', { extend: 'Ext.grid.Panel', alias: 'widget.SimpleGrid', columns: [ { dataIndex: 'name' }, { dataIndex: 'status' }, { dataIndex: 'enabled' } ], store: { fields: ['sex', 'name', 'status',...

How to change url of Ext.window.Window in ExtJs

I am creating model dialog using ExtJS. Below is the Code for it, var win; Ext.application({ name : 'Fiddle', launch : function() { var button = Ext.get('copy_button'); button.on('click', function(){ win = Ext.create('Ext.window.Window', { title: 'Copy Existing', height: 400, width: 500, layout: 'fit', modal: true, loader: { url: '<%= request.getContextPath() %>/demo/copy.action',...

How to migrate a non sencha cmd application to build using sencha cmd (ExtJS 4.2)

I have an extjs 4.2 application which was built by hand coding controllers, views, stores and models. I was looking for a step by step approach to migrate to sencha cmd and could not find one. The reasons for moving to sencha cmd are packaging benefits (1 app.js to load...

how to add tooltip to widget in extjs?

I have a dynamic form in extjs and i want to add tooltip to some elements of the form. widget = { width: 100, title: name, margin: '0 0 0 0', id: id } that my widget that i want to add tooltip. I have already tried adding listener to...

Are there method to get all enabled buttons from pagingtoolbar?

My greetings ! I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar. At this time I can get fisrt disabled button: Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0] But I need...

ExtJs Load diferent data from one store to multiple selects

I have 1 store wich serves me the values from a UD field wich are the options for the comboxes. Ext.define('freetextOrder.model.comboBoxValues', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'unit', type: 'string'} {name: 'comboxid', type: 'int'} ] }); now i have to load foreach comboxid an xtype: 'combobox'...

Pass data between views in ExtJS

I am reading data from store and populating main girdView. When any of the row is clicked, a windows appear and I want to fill the fieldset in that window with the same record which is clicked. Can anyone tell me how to do it? My popup window is like:...

Back-end updates with changes made via inline editing on ExtJS Summary Grid?

While I am trying to track changes made via inline editing on ExtJS Grid (with SummaryGrouping), I want to know what is the best way to update the back-end which is domino database record. Obviously I dont want to update on each and every edit but to see if there...

How to test crud ajax requests in Sencha Fiddle

I would like to use a Sencha Fiddle to test create and update events. I want to investigate, how configuration of the Proxy and format of the response must work together to get successful crud operations. I thought of creating a Sencha Fiddle and read/write the data to an external...

How to create a single running text using extjs4.2?

How to create running text like a marquee non standard HTML element in Extjs4.2 ? This is my snippet code that I've done so far : Ext.Loader.setConfig({ enabled: true, paths: { Ext: '.' } }); Ext.require([ 'Ext.form.*', 'Ext.XTemplate']); Ext.onReady(function () { //Ext.Msg.alert('Fiddle', Ext.get('info').dom.innerHTML); Ext.define('v_label', { extend: 'Ext.form.Label', xtype: 'runningText', renderTo:...

How to best handle multiple related templates in Ext JS?

I am trying to make a panel to display some data I get from an API. I have decided that XTemplates are probably the best way of handling this. However, I would like the panel to be well organized and flexible like other ext.js elements. So what I came up...

Extj 4 controller this.control listeners debounce?

How can I debounce listeners specified inside of controller using this.control ?...

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

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...

Regular Expression for prompt of Ext.MessageBox

i prompt the user to fill the combination of alphabets and number. Here is the code: Ext.Msg.show({ title : 'you can enter alphabets and number', msg : 'Your value', buttons: Ext.Msg.OKCANCEL, scope : this, prompt:true }); Although it prompt to fill the value, but in that field i want to...

Extjs 4.2.2 - Default sorter logic runs instead of custom sorter

On ExtJs 4.2.2 I need to override default sorter of some column and make it sort by the absolute values (Math.abs). When I debug it I get into doSort() and get the right store & direction (asc, desc), but for some reason it doesn't execute rthe sorterFn() - and run...

Extjs: drag n drop tree node and its children to a grid

How can I drag and drop a node(parent) and all its children without selecting them, when the parent node is selected and dragged in the tree? Sample code which I have tried...