Results 1 to 6 of 6

Thread: How to add override files in ExtJs 5.1

  1. #1
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default Answered: How to add override files in ExtJs 5.1

    I have two override files FocusTrap.js and Window.Js which will trap the focus with in overlay or pop, where should I add them in Fiddle and MVC?

    Please find below fiddle url,
    https://fiddle.sencha.com/#fiddle/ir1

    I have placed those two files FocusTrap.js and Window.Js in main folder, I didn't added them in app.js or app/Application.js; yet they are throwing some erorrs in Fiddle and MVC.

    Below is my MVC 5.1 ExtJs folder structure, Please let me know where to add these files to make the code applicable to my aplication.
    Attached Images Attached Images

  2. I do not know which class you are overriding with 'FocusTrap.js' file. The idea is following, if you overriding, for example, 'Ext.grid.column.Column' class, just put it in the same namespace structure in override dir.
    overrides

    Code:
    + overrides
        + grid
            + column
                - Column.js
    And the Column.js file must be something like this
    Code:
    Ext.define('overrides.grid.column.Column', {
        override: 'Ext.grid.column.Column',
    
    
        // Your overrided methods/properties
    });
    and then 'sencha app refresh' or build

  3. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    Create 'window' directory in 'override' dir and put there your 'Window.js'. The same make for FocusTrap ( I do not know which class are you overriding).
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  4. #3
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default

    I am trying to bind or trap tab focus within the Popup or overlay (not allowing tab to go to parent window).The solution you mentioned is it for MVC or fiddle, do we need to add them as requires in app.js or app/Application.js?

    I added directory structure n Fiddle but it is not working. Below is the error it is showing in Console

    Code:
    GET https://fiddle.sencha.com/Ext/window/FocusTrap.js?_dc=1427974282393 ext-all-debug.js:5666 [E] 
    [Ext.Loader] Some requested files failed to load.
    I added same in MVC I got below error in sencha cmd when try to app build

    Code:
    Sencha Cmd v5.1.0.26[INF] Processing Build Descriptor : default
    [INF] Loading app json manifest...
    [ERR] C2008: Requirement had no matching files (Ext.window.FocusTrap) -- D:\ExtJs\research\overrides\window\Window.js:6:74
    [ERR][
    ERR] BUILD FAILED
    [ERR] com.sencha.exceptions.ExBuild: Failed to find any files for D:\ExtJs\research\overrides\window\Window.js::ClassRequire::Ext.window.FocusTrap
    [ERR]
    [ERR] Total time: 8 seconds
    [ERR] The following error occurred while executing this line:C:\Users\dt204017\bin\Sencha\Cmd\5.1.0.26\plugins\ext\current\plugin.xml:403: The following error occurred while executing this line:D:\ExtJs\research\.sencha\app\build-impl.xml:378: The following error occurred while executing this line:D:\ExtJs\research\.sencha\app\init-impl.xml:303: com.sencha.exceptions.ExBuild:Failed to find any files for D:\ExtJs\research\overrides\window\Window.js::ClassRequire::Ext.window.FocusTrap

  5. #4
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    I do not know which class you are overriding with 'FocusTrap.js' file. The idea is following, if you overriding, for example, 'Ext.grid.column.Column' class, just put it in the same namespace structure in override dir.
    overrides

    Code:
    + overrides
        + grid
            + column
                - Column.js
    And the Column.js file must be something like this
    Code:
    Ext.define('overrides.grid.column.Column', {
        override: 'Ext.grid.column.Column',
    
    
        // Your overrided methods/properties
    });
    and then 'sencha app refresh' or build
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  6. #5
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default

    Thanks for the Help, We got these override classes from Support team and they are not in the format you mentioned; I will check with support again.

  7. #6
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default

    For reference I am posting support message below , Please let me know if you get any ideas what they mean
    Code:
    Ext.define('Ext.aria.FocusTrap', {
        extend: 'Ext.Component',
        xtype:  'focustrap',
     
        // Focus traps have 0 height; their width is managed by the parent Window
        height: 0,
     
        tabIndex: 0,
        focusable: true,
     
        ariaRole: 'button',
     
        // Focus traps should not be exposed to Assistive Technologies
        // such as screen readers, so we set aria-busy attribute to
        // effectively hide the element from AT.
        ariaAttributes: {
            'aria-busy': true
        },
     
        onFocusEnter: function(context) {
    //         Method here
        }
    });
    Code:
    Ext.define('EXT.overrides.Window', {
        override: 'Ext.window.Window',
     
        requires: [
            'Ext.util.ComponentDragger',
            'Ext.util.Region',
            'Ext.overrides.FocusTrap'
        ],
     
        initComponent: function() {
         //code here
        }
     
    });
    Add them into a JS file that is included after loading Ext, but before your app.js in the index.html
    -In a fiddle, it would be placed at the top before the code is called.
    - in MVC, add them as files in the overrides DIR and add them to your requires in app.js

Similar Threads

  1. Override files get overwritten
    By JeromeA in forum Sencha Architect 2.x: Help & Discussions
    Replies: 5
    Last Post: 18 Oct 2012, 2:50 PM
  2. [ExtJS 2.2.1] Problem with Ext.override
    By carlosgb in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Sep 2011, 2:23 AM
  3. Data exchange between 2 Files: PHP -> ExtJs or ExtJs -> ExtJs
    By isicom in forum Community Discussion
    Replies: 2
    Last Post: 20 Aug 2011, 9:03 PM
  4. Replies: 4
    Last Post: 4 Nov 2010, 5:32 PM
  5. How to override a function in extjs 3.0
    By freechoice in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 7 Jun 2009, 9:26 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •