How do you include a UX class in the MVC pattern?

extjs gridpanel
egerardus picture egerardus · Apr 25, 2012 · Viewed 16.8k times · Source

Before the MVC pattern I would include UX classes simply by including this at the top of the JS, before Ext.onReady:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);

Now I am working with the MVC pattern and I have a gridpanel that needs to use this same feature. I've included a requires statement in the view like this:

Ext.define('ST.view.StudentLog', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.studentlog',
    requires: [
        'Ext.ux.grid.FiltersFeature'
    ],

But the app produces a 404 error when it first starts loading with this.

Any ideas?

EDIT:

I've tried putting this same block of code at the top of the view also to no avail (referring to the Ext.Loader.setConfig / .setPath block).

The loader keeps trying to load UX classes from extjs/src/ux/ no matter how I try to tell it otherwise. According to this suggestion, I've also tried defining a path property in my app controller but it seems like whatever the answerer saw in the source back then doesn't exist in 4.1 rc3 because I can't find it and it doesn't work.

If I just add the FilterFeature.js as an imported source file in my HTML with <script> tags then all of it's dependencies get 404 errors when my app starts.

There must be a simple way of including UX classes in an app straight from the UX folder so that it can link to other UX dependencies.

Answer

egerardus picture egerardus · Apr 25, 2012

Ok I found it from this post.

Just need to use Ext.Loader.setPath call at the top of the app controller, e.g.:

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.application({
    name: 'ST',
    autoCreateViewport: true,
    ...

Or wherever you want to put the ux classes, for condensing purposes, the app specific UX classes should be pulled out and stuck in your own folder something like app/ux as the post covers.

Related questions

How to add row double click event listener when extending grid panel with Ext.define()?

I am extending GridPanel with Ext.define() (Ext v4). I need to get the row data when a grid row is double clicked. At this point I cannot even get the event listener working: Ext.define('Application.usersGrid', { extend: 'Ext.…

Read More
Updating a field in a record dyanamically in extjs

Scenario I want to update the column data of particular record in grid having store with static data. Here is my store: extend : 'Ext.data.Store', model : 'MyModel', autoLoad:true, proxy: { type: 'ajax', url: 'app/data/data.json', reader: { type: …

Read More
Extjs Grid - Click event listener

I did successfully add a row double click event listener to my grid by: listeners : { itemdblclick: function(dv, record, item, index, e) { alert('working'); } }, Now, I need to get the exact value in third column at the selected row, how …

Read More