Ext JS Sencha Docs

Ext.plugin.Responsive

Hierarchy

Ext.Base
Ext.mixin.Responsive
Ext.plugin.Responsive

Subclasses

Files

This plugin can be added to component instances to process a responsiveConfig. For example:

 Ext.create({
     xtype: 'viewport',
     layout: 'border',

     items: [{
         title: 'Some Title',
         plugins: 'responsive',

         responsiveConfig: {
             'width < 800': {
                 region: 'north'
             },

             'width >= 800': {
                 region: 'west'
             }
         }
     }]
 });

For details see responsiveConfig.

Defined By

Config options

This object consists of keys that represent the conditions on which configs will be applied. ...

This object consists of keys that represent the conditions on which configs will be applied. For example:

 responsiveConfig: {
     landscape: {
         region: 'west'
     },
     portrait: {
         region: 'north'
     }
 }

In this case the keys ("landscape" and "portrait") are the criteria (or "rules") and the object to their right contains the configs that will apply when that rule is true.

These rules can be any valid JavaScript expression but the following values are considered in scope:

  • landscape - True if the device orientation is landscape (always true on desktop devices).
  • portrait - True if the device orientation is portrait (always false on desktop devices).
  • tall - True if width < height regardless of device type.
  • wide - True if width > height regardless of device type.
  • width - The width of the viewport
  • height - The height of the viewport.
  • platform - An object containing various booleans describing the platform.

A more complex example:

 responsiveConfig: {
     'width > 800': {
         region: 'west'
     },
     'width <= 800': {
         region: 'north'
     }
 }

NOTE: If multiple rules set a single config (like above), it is important that the rules be mutually exclusive. That is, only one rule should set each config. If multiple rules are actively setting a single config, the order of these (and therefore the config's value) is unspecified.

For a config to participate as a responsiveConfig it must have a "setter" method. In the above example, a "setRegion" method must exist.

Available since: 5.0.0

It is common when using responsiveConfig to have recurring expressions that make for complex configurations. ...

It is common when using responsiveConfig to have recurring expressions that make for complex configurations. Using responsiveFormulas allows you to cut down on this repetition by adding new properties to the "scope" for the rules in a responsiveConfig.

For example:

 Ext.define('MyApp.view.main.Main', {
     extend: 'Ext.container.Container',

     mixins: [
         'Ext.mixin.Responsive'
     ],

     responsiveFormulas: {
         small: 'width < 600',

         medium: 'width >= 600 && width < 800',

         large: 'width >= 800',

         tuesday: function (context) {
             return (new Date()).getDay() === 2;
         }
     }
 });

With the above declaration, any responsiveConfig can now use these values like so:

 responsiveConfig: {
     small: {
         hidden: true
     },
     medium: {
         hidden: false,
         region: 'north'
     },
     large: {
         hidden: false,
         region: 'west'
     }
 }

Available since: 5.0.1

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

The value true causes config values to be stored on instances using a property name prefixed with an underscore ("_")...

The value true causes config values to be stored on instances using a property name prefixed with an underscore ("_") character. A value of false stores config values as properties using their exact name (no prefix).

Defaults to: false

Available since: 5.0.0

Overrides: Ext.layout.Layout.$configPrefixed, Ext.Component.$configPrefixed, Ext.data.AbstractStore.$configPrefixed, Ext.layout.container.boxOverflow.None.$configPrefixed

The value true instructs the initConfig method to only honor values for properties declared in the config block of a ...

The value true instructs the initConfig method to only honor values for properties declared in the config block of a class. When false, properties that are not declared in a config block will be placed on the instance.

Defaults to: true

Available since: 5.0.0

Overrides: Ext.layout.Layout.$configStrict, Ext.Component.$configStrict, Ext.data.AbstractStore.$configStrict, Ext.layout.container.boxOverflow.None.$configStrict

This property is set to true during the call to initConfig. ...

This property is set to true during the call to initConfig.

Defaults to: false

Available since: 5.0.0

This property is set to true if this instance is the first of its class. ...

This property is set to true if this instance is the first of its class.

Defaults to: false

Available since: 5.0.0

This value is true and is used to identify plain objects from instances of a defined class. ...

This value is true and is used to identify plain objects from instances of a defined class.

Defaults to: true

Ext.plugin.Responsive
view source
: Booleanprivate
...

Defaults to: true

Ext.plugin.Responsive
view source
: Stringprivate
...

Defaults to: 'responsive'

Ext.plugin.Responsive
view source
: Objectprivate
Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
Defined By

Static properties

...

Defaults to: []

Methods

Defined By

Instance methods

Ext.plugin.Responsive
view source
new( config ) : Ext.plugin.Responsive
...

Parameters

Returns

Fires

    Activates event listeners for all Responsive instances. ...

    Activates event listeners for all Responsive instances. This method is called when the first instance is registered.

    ( deprecations )private
    This method applies a versioned, deprecation declaration to this class. ...

    This method applies a versioned, deprecation declaration to this class. This is typically called by the deprecated config.

    Parameters

    This class system hook method is called at the tail end of the mixin process. ...

    This class system hook method is called at the tail end of the mixin process. We need to see if the targetClass has already got a responsiveConfig and if so, we must add its value to the real config.

    Parameters

    Overrides: Ext.util.ElementContainer.afterClassMixedIn

    ( args ) : Objectdeprecatedprotected
    Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

    Call the original method that was previously overridden with override

    Ext.define('My.Cat', {
        constructor: function() {
            alert("I'm a cat!");
        }
    });
    
    My.Cat.override({
        constructor: function() {
            alert("I'm going to be a cat!");
    
            this.callOverridden();
    
            alert("Meeeeoooowwww");
        }
    });
    
    var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                              // alerts "I'm a cat!"
                              // alerts "Meeeeoooowwww"
    

    This method has been deprecated

    Use callParent instead.

    Parameters

    • args : Array/Arguments

      The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

    Returns

    • Object

      Returns the result of calling the overridden method

    Call the "parent" method of the current method. ...

    Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

     Ext.define('My.Base', {
         constructor: function (x) {
             this.x = x;
         },
    
         statics: {
             method: function (x) {
                 return x;
             }
         }
     });
    
     Ext.define('My.Derived', {
         extend: 'My.Base',
    
         constructor: function () {
             this.callParent([21]);
         }
     });
    
     var obj = new My.Derived();
    
     alert(obj.x);  // alerts 21
    

    This can be used with an override as follows:

     Ext.define('My.DerivedOverride', {
         override: 'My.Derived',
    
         constructor: function (x) {
             this.callParent([x*2]); // calls original My.Derived constructor
         }
     });
    
     var obj = new My.Derived();
    
     alert(obj.x);  // now alerts 42
    

    This also works with static methods.

     Ext.define('My.Derived2', {
         extend: 'My.Base',
    
         statics: {
             method: function (x) {
                 return this.callParent([x*2]); // calls My.Base.method
             }
         }
     });
    
     alert(My.Base.method(10));     // alerts 10
     alert(My.Derived2.method(10)); // alerts 20
    

    Lastly, it also works with overridden static methods.

     Ext.define('My.Derived2Override', {
         override: 'My.Derived2',
    
         statics: {
             method: function (x) {
                 return this.callParent([x*2]); // calls My.Derived2.method
             }
         }
     });
    
     alert(My.Derived2.method(10); // now alerts 40
    

    To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

    Parameters

    • args : Array/Arguments

      The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

    Returns

    • Object

      Returns the result of calling the parent method

    This method is used by an override to call the superclass method but bypass any overridden method. ...

    This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

    Consider:

     Ext.define('Ext.some.Class', {
         method: function () {
             console.log('Good');
         }
     });
    
     Ext.define('Ext.some.DerivedClass', {
         extend: 'Ext.some.Class',
    
         method: function () {
             console.log('Bad');
    
             // ... logic but with a bug ...
    
             this.callParent();
         }
     });
    

    To patch the bug in Ext.some.DerivedClass.method, the typical solution is to create an override:

     Ext.define('App.patches.DerivedClass', {
         override: 'Ext.some.DerivedClass',
    
         method: function () {
             console.log('Fixed');
    
             // ... logic but with bug fixed ...
    
             this.callSuper();
         }
     });
    

    The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

    Parameters

    • args : Array/Arguments

      The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

    Returns

    • Object

      Returns the result of calling the superclass method

    Deactivates event listeners. ...

    Deactivates event listeners. This method is called when the last instance is destroyed.

    This method removes this instance from the Responsive collection. ...

    This method removes this instance from the Responsive collection.

    Fires

      Overrides: Ext.Base.destroy

      Returns a specified config property value. ...

      Returns a specified config property value. If the name parameter is not passed, all current configuration options will be returned as key value pairs.

      Parameters

      • name : String (optional)

        The name of the config property to get.

      • peek : Boolean (optional)

        true to peek at the raw value without calling the getter.

        Defaults to: false

      Returns

      • Object

        The config property value.

      Returns the initial configuration passed to constructor when instantiating this class. ...

      Returns the initial configuration passed to constructor when instantiating this class.

      Parameters

      • name : String (optional)

        Name of the config option to return.

      Returns

      • Object/Mixed

        The full config object or a single config value when name parameter specified.

      Evaluates and returns the configs based on the responsiveConfig. ...

      Evaluates and returns the configs based on the responsiveConfig. This method relies on the state being captured by the updateContext method.

      Fires

        ...

        Parameters

        Ext.plugin.Responsive
        view source
        ( )private
        ...
        ( config ) : Ext.Basechainableprotected
        Initialize configuration for this class. ...

        Initialize configuration for this class. a typical example:

        Ext.define('My.awesome.Class', {
            // The default config
            config: {
                name: 'Awesome',
                isAwesome: true
            },
        
            constructor: function(config) {
                this.initConfig(config);
            }
        });
        
        var awesome = new My.awesome.Class({
            name: 'Super Awesome'
        });
        
        alert(awesome.getName()); // 'Super Awesome'
        

        Parameters

        Returns

        Fires

          Updates all registered the Responsive instances (found in the all collection). ...

          Updates all registered the Responsive instances (found in the all collection).

          Handler of the window resize event. ...

          Handler of the window resize event. Schedules a timer so that we eventually call notify.

          Overrides: Ext.container.Container.onResize

          This method is the timer handler. ...

          This method is the timer handler. When called this removes the timer and calls notify.

          ( instance, instanceConfig, name )private
          This method is called to update the internal state of a given config since the config is needed prior to initConfig p...

          This method is called to update the internal state of a given config since the config is needed prior to initConfig processing the instanceConfig.

          Available since: 5.0.1

          Parameters

          • instance : Ext.Base

            The instance to configure.

          • instanceConfig : Object

            The config for the instance.

          • name : String

            The name of the config to process.

          ( name, [value] ) : Ext.Basechainable
          Sets a single/multiple configuration options. ...

          Sets a single/multiple configuration options.

          Parameters

          • name : String/Object

            The name of the property to set, or a set of key value pairs to set.

          • value : Object (optional)

            The value to set for the name parameter.

          Returns

          Fires

            Get the reference to the class from which this object was instantiated. ...

            Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

            Ext.define('My.Cat', {
                statics: {
                    totalCreated: 0,
                    speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                },
            
                constructor: function() {
                    var statics = this.statics();
            
                    alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                    // equivalent to: My.Cat.speciesName
            
                    alert(this.self.speciesName);   // dependent on 'this'
            
                    statics.totalCreated++;
                },
            
                clone: function() {
                    var cloned = new this.self();   // dependent on 'this'
            
                    cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
            
                    return cloned;
                }
            });
            
            
            Ext.define('My.SnowLeopard', {
                extend: 'My.Cat',
            
                statics: {
                    speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                },
            
                constructor: function() {
                    this.callParent();
                }
            });
            
            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
            
            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
            
            var clone = snowLeopard.clone();
            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
            alert(clone.groupName);                 // alerts 'Cat'
            
            alert(My.Cat.totalCreated);             // alerts 3
            

            Returns

            This config system hook method is called just prior to processing the specified "instanceConfig". ...

            This config system hook method is called just prior to processing the specified "instanceConfig". This hook returns the instanceConfig that will actually be processed by the config system.

            Parameters

            • instanceConfig : Object

              The user-supplied instance config object.

            Fires

              Updates the context object base on the current environment. ...

              Updates the context object base on the current environment.

              Evaluates and applies the responsiveConfig to this instance. ...

              Evaluates and applies the responsiveConfig to this instance. This is called by notify automatically.

              Fires

                Defined By

                Static methods

                ( config, [mixinClass] )privatestatic
                Adds new config properties to this class. ...

                Adds new config properties to this class. This is called for classes when they are declared, then for any mixins that class may define and finally for any overrides defined that target the class.

                Parameters

                • config : Object
                • mixinClass : Class (optional)

                  The mixin class if the configs are from a mixin.

                ( members )chainableprivatestatic
                ...

                Parameters

                ( name, member )chainableprivatestatic
                ...

                Parameters

                ( members, [isStatic], [privacy] )chainablestatic
                Add methods / properties to the prototype of this class. ...

                Add methods / properties to the prototype of this class.

                Ext.define('My.awesome.Cat', {
                    constructor: function() {
                        ...
                    }
                });
                
                 My.awesome.Cat.addMembers({
                     meow: function() {
                        alert('Meowww...');
                     }
                 });
                
                 var kitty = new My.awesome.Cat();
                 kitty.meow();
                

                Parameters

                • members : Object

                  The members to add to this class.

                • isStatic : Boolean (optional)

                  Pass true if the members are static.

                  Defaults to: false

                • privacy : Boolean (optional)

                  Pass true if the members are private. This only has meaning in debug mode and only for methods.

                  Defaults to: false

                ( members ) : Ext.Basechainablestatic
                Add / override static properties of this class. ...

                Add / override static properties of this class.

                Ext.define('My.cool.Class', {
                    ...
                });
                
                My.cool.Class.addStatics({
                    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                });
                

                Parameters

                Returns

                ( fromClass, members ) : Ext.Baseprivatestatic
                Borrow another class' members to the prototype of this class. ...

                Borrow another class' members to the prototype of this class.

                Ext.define('Bank', {
                    money: '$$$',
                    printMoney: function() {
                        alert('$$$$$$$');
                    }
                });
                
                Ext.define('Thief', {
                    ...
                });
                
                Thief.borrow(Bank, ['money', 'printMoney']);
                
                var steve = new Thief();
                
                alert(steve.money); // alerts '$$$'
                steve.printMoney(); // alerts '$$$$$$$'
                

                Parameters

                • fromClass : Ext.Base

                  The class to borrow members from

                • members : Array/String

                  The names of the members to borrow

                Returns

                ( args )protectedstatic
                ...

                Parameters

                ( args )protectedstatic
                ...

                Parameters

                Create a new instance of this Class. ...

                Create a new instance of this Class.

                Ext.define('My.cool.Class', {
                    ...
                });
                
                My.cool.Class.create({
                    someConfig: true
                });
                

                All parameters are passed to the constructor of the class.

                Returns

                ( alias, origin )static
                Create aliases for existing prototype methods. ...

                Create aliases for existing prototype methods. Example:

                Ext.define('My.cool.Class', {
                    method1: function() { ... },
                    method2: function() { ... }
                });
                
                var test = new My.cool.Class();
                
                My.cool.Class.createAlias({
                    method3: 'method1',
                    method4: 'method2'
                });
                
                test.method3(); // test.method1()
                
                My.cool.Class.createAlias('method5', 'method3');
                
                test.method5(); // test.method3() -> test.method1()
                

                Parameters

                ( config )privatestatic
                ...

                Parameters

                Returns the Ext.Configurator for this class. ...

                Returns the Ext.Configurator for this class.

                Returns

                Get the current class' name in string format. ...

                Get the current class' name in string format.

                Ext.define('My.cool.Class', {
                    constructor: function() {
                        alert(this.self.getName()); // alerts 'My.cool.Class'
                    }
                });
                
                My.cool.Class.getName(); // 'My.cool.Class'
                

                Returns

                ( name, mixinClass )privatestatic
                Used internally by the mixins pre-processor ...

                Used internally by the mixins pre-processor

                Parameters

                ( fn, scope )chainableprivatestatic
                ...

                Parameters

                Override members of this class. ...

                Override members of this class. Overridden methods can be invoked via callParent.

                Ext.define('My.Cat', {
                    constructor: function() {
                        alert("I'm a cat!");
                    }
                });
                
                My.Cat.override({
                    constructor: function() {
                        alert("I'm going to be a cat!");
                
                        this.callParent(arguments);
                
                        alert("Meeeeoooowwww");
                    }
                });
                
                var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                          // alerts "I'm a cat!"
                                          // alerts "Meeeeoooowwww"
                

                Direct use of this method should be rare. Use Ext.define instead:

                Ext.define('My.CatOverride', {
                    override: 'My.Cat',
                    constructor: function() {
                        alert("I'm going to be a cat!");
                
                        this.callParent(arguments);
                
                        alert("Meeeeoooowwww");
                    }
                });
                

                The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

                Parameters

                • members : Object

                  The properties to add to this class. This should be specified as an object literal containing one or more properties.

                Returns