extjs4.2 , How to use plugins in Extjs


How to use plugins in Extjs

Question:

Tag: extjs4.2

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

Edit:

After going through the link provided in the comments by DSF

I added Path in app.js

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': './app/ux'
    }
});

Also changed the tab panel to include

Ext.require(['Ext.ux.TabReorderer']);
Ext.define("practical.view.Board",{...
...

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)


Answer:

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

http://www.sencha.com/blog/using-plugins-and-mixins-in-your-sencha-apps/


Related:


ExtJs dropdown list with two color rows


extjs,extjs4.2
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 find nth child nodes in ExtJS 4.1 tree panel


extjs,extjs4,extjs4.1,extjs4.2
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....

How to use plugins in Extjs


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

how to make simple paging extjs4


extjs4.2
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 migrate a non sencha cmd application to build using sencha cmd (ExtJS 4.2)


extjs,extjs4.2,sencha-cmd
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...

Extjs 4.2.2 - Default sorter logic runs instead of custom sorter


sorting,extjs,datagrid,extjs4.2
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...

form.submit not working while file upload in ExtJS


java,javascript,rest,extjs4.2
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,...

Extjs : get modified records after store reconfigure


extjs,extjs4.2
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 best handle multiple related templates in Ext JS?


javascript,extjs,extjs4,extjs4.2
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...

Pass data between views in ExtJS


extjs,extjs4.2,sencha-cmd
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:...

Extj 4 controller this.control listeners debounce?


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

ExtJs Load diferent data from one store to multiple selects


javascript,extjs,combobox,extjs4.2
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'...

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


extjs,extjs4.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,...

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


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

how to add tooltip to widget in extjs?


javascript,extjs,extjs4.2
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...

How to test crud ajax requests in Sencha Fiddle


extjs,extjs4.2,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 make a CSS-based Extjs layout for containers?


extjs,extjs4.2
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...

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


javascript,animation,css-animations,extjs4.2,marquee
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:...

Are there method to get all enabled buttons from pagingtoolbar?


extjs,extjs4.2
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...

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


extjs,extjs4,extjs4.1,extjs4.2,extjs-mvc
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',...

ExtJS 4.2.0 gridpanel inside viewport rendering extra column


extjs4.2
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',...

Row column selected extjs


css,extjs,html-table,extjs4.2
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...

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


extjs,extjs4.2,lotus
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...

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


extjs,drag-and-drop,extjs4.2,treepanel
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...

Regular Expression for prompt of Ext.MessageBox


extjs,extjs4,extjs4.1,extjs4.2,extjs3
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...