Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Doubt on Ext.override

  1. #1

    Default Doubt on Ext.override

    hi there

    sorry for the noob question but i really have to understand this...

    is it possible to, somehow, add functions to a object without override the existing ones?

    yah i know: use Ext.extend instead of Ext.override...but let me explain.

    imagine that i want to add a simple function to ALL Ext.form.Field objects...how can i do it? I use Ext.override but i always have to be worry i might causing some errors by forgetting some existing code, worry about further updates...bla bla bla

    can we, somehow extend one class but NOT create a subclass?

    a specific example:

    if i want that every single Ext.form.Field have some more code in the end of the onRender() how can i do it?

    mathematically speaking i need

    onRender = onRender + newOnRender

    instead of

    onRender = newOnRender

    tks for the assistance...

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    That would be something like this:

    Code:
    var FF = Ext.form.Field;
    Ext.override( FF , {
        onRender : FF.prototype.onRender.createSequence(function(){ ... })
    });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3

    Default

    damm that was fast!



    can you just explain/point to something about ...createSequence...

    i know nothing about it and i like to fully understand what im doing :P

    PS: really appreciate your help

  4. #4
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    think sequentially: newFunction = sourceFunction.createSequence ( afterSourceFunction )
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5

    Default

    thanks hendricd

    i will dig that and hopefully it solves my problem

    im pretty sure of that...

  6. #6

    Default

    indeed your solution works exactly as i need...tks for that

    if you allow me, i would like to expand my problem:

    i want to select the field label div to prevent the default onClick behavior (for example, if i click in a combo label, the combo is expanded) and assign a new handler.

    i know i can do something like

    Code:
    <a href="#" onClick=myFunction()>fieldLabel</a>
    but i was searching for a better solution...

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You want a click handler on a label?

    First fix the FormLayout (Must be on latest release for this to work):

    Code:
    Ext.override(Ext.layout.FormLayout, {
        renderItem : function(c, position, target){
            if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
                var args = this.getTemplateArgs(c);
                if(Ext.isNumber(position)){
                    position = target.dom.childNodes[position] || null;
                }
                if(position){
                    c.itemCt = this.fieldTpl.insertBefore(position, args, true);
                }else{
                    c.itemCt = this.fieldTpl.append(target, args, true);
                }
                if(!c.rendered){
                    c.label = c.getItemCt().child('label.x-form-item-label');
                    c.render('x-form-el-' + c.id);
                }else if(!this.isValidParent(c, target)){
                    Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
                }
                if(!c.getItemCt){
                    // Non form fields don't have getItemCt, apply it here
                    // This will get cleaned up in onRemove
                    Ext.apply(c, {
                        getItemCt: function(){
                            return c.itemCt;
                        },
                        customItemCt: true
                    });
                }
                if(this.trackLabels && !this.isHide(c)){
                    if(c.hidden){
                        this.onFieldHide(c);
                    }
                    c.on({
                        scope: this,
                        show: this.onFieldShow,
                        hide: this.onFieldHide
                    });
                }
                this.configureItem(c);
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        }
    });
    Then you can use a render listener on your field, and in that add a click listener to the label.

  8. #8

    Default

    never thought on that way...that would probably do the trick

    i'll just try to finish my own way and then start with your idea...many tks

  9. #9

    Default

    nop...no way it will work

    i was trying this way:

    Code:
    var FF = Ext.form.Field;
    Ext.override( FF , {
        initComponent : FF.prototype.initComponent.createSequence(function(){
            if (this.drilldown){
             
                this.fieldLabel = '<a href="#" class="drilldown" >'+this.fieldLabel+'</a>';
                
            }
        }),
        afterRender : FF.prototype.afterRender.createSequence(function(){
            if (this.drilldown){
                
                var label = Ext.DomQuery.select("label["+this.id+"]");
                
                console.debug(label)
                
            }
        })
    });
    but at this point, the label don't exist so always returns null...

    i tried to include your code with no success since it returns

    Code:
    this.el is undefined
    [IMG]chrome://firebug/content/blank.gif[/IMG]        return this.el.up('.x-form-item', 4);
    with "Must be on latest release for this to work" do you mean

    Ext JS 3.0.2 (Support Subscribers Only)
    Released on September 16th, 2009.

    cuz im using 3.0.0 :P

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Yep, 3.0.0 will NOT work. There's been work done on the FormLayout class recently.

Page 1 of 2 12 LastLast

Posting Permissions

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