1. #1
    Ext JS Premium Member Spenna's Avatar
    Join Date
    Apr 2008
    Posts
    56
    Answers
    2
    Vote Rating
    0
    Spenna is on a distinguished road

      0  

    Default Answered: Custom component with 'multiple inheritance'

    Answered: Custom component with 'multiple inheritance'


    Hi. I'm finding myself copy-pasting a lot of the same code for my views in a new MVC app i'm developing.
    The common items are windows with gridpanel, which displays records that are edited via modal windows with forms.
    I'd like to abstract these into my own components, i.e 'FormWin' (modal window with a formpanel), but i can't figure out how to dynamically override the internal items of the form inside the abstracted window.
    This is my base class (simplified a bit for the sake of readability, important parts bolded)
    Code:
    Ext.define('App.view.Form', {
        extend: 'Ext.window.Window',
        layout: 'fit',
        modal : true,
        width : 325,
        autoShow: true,
        border : false,
        loadRecord : function(record) {
            this.setTitle((record.phantom?'Opprett <recordtype>':'Rediger <recordtype>'));
            this.down('button[action=create]').setVisible(record.phantom);
            this.down('button[action=save]').setVisible(!record.phantom);
            this.down('form').loadRecord(record);
        },
        initComponent: function() {
    
            this.items = [
                {
                    frame : true,
                    xtype: 'form',
                    defaults : {
                        xtype : 'textfield',
                        msgTarget : 'side',
                        anchor : '100%'
                    },
                    items: [                        // This is essentially what i want to override in subclasses of this component
                        {
                            name : 'name',
                            xtype : 'textfield',
                            fieldLabel: 'Generic item' // Just something as default - should always be overridden
                        }
                    ]
                }
            ];
            this.buttons = [
                {
                    text: 'Create',
                    action: 'create'
                },{
                    text: 'Save',
                    action: 'save'
                },
                {
                    text: 'Cancel',
                    action: 'cancel',
                    scope: this,
                    handler: this.close
                }
            ];
    
            this.callParent(arguments);
        }
    });
    And this illustrates how i'd like to extend my component in the app
    Code:
    Ext.define('App.view.user.Form', {
        extend: 'App.view.Form',
        alias : 'widget.userform',
        loadRecord : function(record) {
            this.down('form').getForm().findField('new_password').allowBlank = !record.phantom;
            this.down('form').getForm().findField('new_password').emptyText = (record.phantom?'':'Only fill out if you want to change password');
            this.callParent(arguments)
        },
        initComponent: function() {
            
             this.items[0].items = [ // I just want to override the items of this windows contained form
                {
                    name : 'name',
                    fieldLabel: 'Navn'
                },
                {
                    name : 'username',
                    fieldLabel: 'Brukernavn'
                },
                {
                    name : 'new_password',
                    fieldLabel: 'Passord'
                }
            ];
    
            this.callParent(arguments);
        }
    });
    Anyone have a clue how to accomplish this?

  2. So build different items based on a property being set or create an abstract class and have subclasses

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    What do you want to override it with? How to tell to do some items and not others?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Ext JS Premium Member Spenna's Avatar
    Join Date
    Apr 2008
    Posts
    56
    Answers
    2
    Vote Rating
    0
    Spenna is on a distinguished road

      0  

    Default


    I want to override all items in the inner 'form' of the extended window, but inherit the rest of the form-config.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So build different items based on a property being set or create an abstract class and have subclasses
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Ext JS Premium Member Spenna's Avatar
    Join Date
    Apr 2008
    Posts
    56
    Answers
    2
    Vote Rating
    0
    Spenna is on a distinguished road

      0  

    Default


    Ok, thought there might was an 'extish' way of doing this, i.e ApplyIf recursivly on objects or something.
    But your solution works, so thanks!

  7. #6
    Sencha User
    Join Date
    Dec 2010
    Location
    France
    Posts
    42
    Vote Rating
    0
    christophe.braud is on a distinguished road

      0  

    Default


    Did you try something like this?
    Code:
    initComponent: function() {
        var me = this;
        
        Ext.apply(me, {
            items: [{
                frame : true,
                xtype: 'form',
                defaults : {
                    xtype : 'textfield',
                    msgTarget : 'side',
                    anchor : '100%'
                },
                items: [{
                    name : 'name',
                    xtype : 'textfield',
                    fieldLabel: 'Generic item'
                }]
            }],
            buttons: [{
                text: 'Create',
                action: 'create'
            },{
                text: 'Save',
                action: 'save'
            },{
                text: 'Cancel',
                action: 'cancel',
                scope: this,
                handler: this.close
            }]        
        });
    
        me.callParent(arguments);    
    }

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