1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    e-get2 is on a distinguished road

      0  

    Question Alternative for Ext.getCmp() ?

    Alternative for Ext.getCmp() ?


    Dudes, how can i call my components without Ext.getCmp() ???

    I have watch :
    http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

    But, this is not so easy....

    I have 2 codes generated, using Ext Designer 1.1.2 ...

    1 - UIAlterarSenha.ui.js

    UIAlterarSenhaUi = Ext.extend(Ext.Window, {
    id: 'winAlterarSenha',
    initComponent: function() {
    this.items = [
    {
    xtype: 'form',
    title: '',
    x: 0,
    y: 0,
    height: 210,
    layout: 'absolute',
    border: false,
    ref: 'frmAlteracaoSenha',
    id: 'frmAlteracaoSenha',
    items: [
    {
    xtype: 'textfield',
    width: 180,
    x: 10,
    y: 20,
    name: 'edtAlterarSenhaEmpresa',
    ref: '../edtAlterarSenhaEmpresa',
    id: 'edtAlterarSenhaEmpresa'

    },

    .
    .
    .

    But i want to acess textfield :edtAlterarSenhaEmpresa, without Ext.getCmp().

    2 - UIAlterarSenha.js

    UIAlterarSenha = Ext.extend(UIAlterarSenhaUi, {
    initComponent: function() {
    UIAlterarSenha.superclass.initComponent.call(this);

    Ext.getCmp('edtAlterarSenhaEmpresa')...
    // How can i do this in a different mode ???


    }
    });

  2. #2
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    73
    Vote Rating
    1
    AlxH is on a distinguished road

      0  

    Default


    You can do something like:

    Code:
    var field=this.down("form").getForm().findField("edtAlterarSenhaEmpresa");
    Don't know if it's better than "getCmp", though.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    e-get2 is on a distinguished road

      0  

    Default


    Quote Originally Posted by AlxH View Post
    You can do something like:

    Code:
    var field=this.down("form").getForm().findField("edtAlterarSenhaEmpresa");

    Don't know if it's better than "getCmp", though.

    This is the problem, i want scape from Hard Coding...

    with something like:

    this.edtAlterarSenhaEmpresa

    but, i have tried and not works...

  4. #4
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    73
    Vote Rating
    1
    AlxH is on a distinguished road

      0  

    Default


    Well at least that way you can leave the properties "id" and "ref" out and you can have multiple instances of your class. So Its not that "hard coded"
    One other approach would be to instanciate the field before in initComponent
    like:
    this.myField=new Ext.form.field.Text({....});

    and replace the { xtype:'textfield' ....} with "this.myField"

  5. #5
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,649
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    ref does not exist anymore, and id is unnecessary and makes no sense here.

    ComponentQuery is easy to use, in your case just do
    Code:
    this.down('field[name="edtAlterarSenhaEmpresa"]')
    and that's it. You can do it from window or form, it searches recursive. It works without any additional attribute, so it's the most flexible solution.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    507
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      1  

    Default


    Have a look at the examples, here the FeedViewer app:

    Code:
    Ext.define('FeedViewer.App', {
        extend: 'Ext.container.Viewport',
        
        initComponent: function(){
            [...]
            
            Ext.apply(this, {
                layout: 'border',
                padding: 5,
                items: [this.createFeedPanel(), this.createFeedInfo()]
            });
            this.callParent(arguments);
        },
        
       [...]
        
        createFeedInfo: function(){
            this.feedInfo = Ext.create('widget.feedinfo', {
                region: 'center'
            });
            return this.feedInfo;
        },
        
        onFeedSelect: function(feed, title, url){
            this.feedInfo.addFeed(title, url);
        }
    });
    I usually define those variables (class fields) at the top of the class definition alongside with some documentation

    Code:
    Ext.define('FeedViewer.App', {
        extend: 'Ext.container.Viewport',
    
        /** 
         *  a reference to the feedInfo panel which ...
         */ 
        feedInfo : null,


    I have the impression that some users are afraid of directly instantiating components because they want to apply lazy loading (using object literals with an xtype).
    However, there is no real benefit in applying xtype lazy loading throughout your component hierarchy if you are properly encapsulating your application by use of classes.

    In this example (FeedViewer), for instance, the sub components will be created upon instantiation of the FeedViewer class, and *not* upon definition (aka loading of the code) thereof.

    At the same time, taking the code from the first post, all child components will be created as soon as an instance of UIAlterarSenha is created - no matter if you use xtype definitions or not. The loading behavior is the same as in the FeedViewer example.

    It surely makes sense to use some form of lazy loading in large applications where parts of the UI are not loaded until a later point in time.
    In such a case apply lazy loading at distinctive points high up in the component hierarchy. E.g. if you use a TabPanel or CardLayout to switch between app modules, make sure that the topmost element for a module is lazy loaded.

    HTH

Similar Threads

  1. Alternative row colours
    By jmls in forum Ext: Discussion
    Replies: 0
    Last Post: 3 May 2011, 12:02 PM
  2. hideTabStripItem alternative in Ext 4?
    By FoxMulder900 in forum Ext: Discussion
    Replies: 6
    Last Post: 21 Apr 2011, 1:36 AM
  3. Removing getCmp and replacing with alternative method
    By lukefowell89 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 21 Feb 2011, 4:34 AM
  4. Alternative Tab Styles
    By Eric24 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 13 Sep 2010, 5:53 AM

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar