1. #1
    Sencha Premium Member VDP's Avatar
    Join Date
    Feb 2012
    Location
    Boom, Belgium
    Posts
    90
    Vote Rating
    10
    VDP will become famous soon enough

      0  

    Default Custom code or trigger a method inside initComponent

    I'm creating custom component in Architect. I have this problem. I need to execute some code in the initComponent method after the Ext.applyIf... yadayada.. and before me.callParent(arguments);

    I could create an override but I fear to lose the stuff added by architect. When I set a property with an array or an object value they are set inside the Ext.applyIf... So if I override the whole method I can't change those properties with architect anymore.

    I can't override and call this overridden method. When I call it in the end I don't have the variables set in the Ext.applyIf. When I call it in the beginning the me.callParent(arguments) is run to early. I'm not really sure if it's going to be a problem but it would be cleaner if it's called at the end.

    Last but not least I like to avoid using an override.. Since I like to put it in 1 exportable component file. (.xdc)

    Code:
    initComponent: function() {
    
        var me = this;
    
        Ext.applyIf(me, {
            records: [
               
            ],
            recursiveRecords: [
                
            ]
        });
    
        /* I would like to do stuff here. like:
        * me.myOwnInitStuff();
        */
    
        me.callParent(arguments);
    }
    Is it possible? And can it be done without overrides? When I have to use an override can it be packed inside a same custom component file? (probably not...)

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,991
    Vote Rating
    1193
    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

    Architect doesn't allow you to edit initComponent directly so you could create an override and override the initComponent, just make sure to call the overridden class.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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.

  3. #3
    Sencha Premium Member VDP's Avatar
    Join Date
    Feb 2012
    Location
    Boom, Belgium
    Posts
    90
    Vote Rating
    10
    VDP will become famous soon enough

      0  

    Default

    Respect that you answer that much questions Mitchell, but I guess you haven't read this one verry well or I wasn't clear.

    I can't override and call this overridden method. When I call it in the end I don't have the variables set in the Ext.applyIf. When I call it in the beginning the me.callParent(arguments) is run to early. I'm not really sure if it's going to be a problem but it would be cleaner if it's called at the end. (Edit: it appears not that much of a problem aldough it would be cleaner to call me.callParent(arguments); in the end)

    Last but not least I like to avoid using an override.. Since I like to put it in 1 exportable component file. (.xdc)
    I guess the answer is: not possible (yet)

  4. #4
    Sencha Premium Member VDP's Avatar
    Join Date
    Feb 2012
    Location
    Boom, Belgium
    Posts
    90
    Vote Rating
    10
    VDP will become famous soon enough

      0  

    Default

    It would be nice if you could do the same with the initComponent as you can do with the init method in a controller. You can add the init method, type your arbitrary code en architect automatically merges it.

  5. #5
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default

    especially with mvc!
    I have a custom function that is hundreds of lines of code. It is only needed for one panel in a window.
    It would be nice to have an init method to be able to put this.

  6. #6
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      -1  

    Default

    how do you override initComponent, while keeping what was in the original component definition?
    Code:
     
    Ext.define('AtlasNav.view.TripBuilder', {
        extend: 'Ext.window.Window',
        alias: 'widget.tripbuilder',
    
        frame: false,
        height: 320,
        width: 842,
        layout: {
            type: 'border'
        }, 
    title: 'My Window',
        modal: true,
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',...
    override:
    Code:
    Ext.define('AtlasNav.view.override.TripBuilder', {
        requires: 'AtlasNav.view.TripBuilder'
    }, function() {
        Ext.override(AtlasNav.view.TripBuilder, {
           initComponent: function() {
         //   var me = this;
               this.callOverridden();
            console.log('test init');
        this.callParent(arguments);
        }  
        });
    });
    if you override init, the applyif doesn't happen, so no component gets created, correct?

  7. #7
    Sencha User
    Join Date
    Jan 2014
    Location
    pittsburg , PA
    Posts
    32
    Vote Rating
    0
    arunmatics is on a distinguished road

      0  

    Default

    Hi ,

    I want to create table with calculation logic. here is my code. i got gridsummary is not a function and i cant call the convert function too. where i made a mistake. pls help me its urgent.

    i put this code in separate load method and i call the summary in hvpanel. is that right way ?

    Greeting !

    Code:
    Ext.QuickTips.init();
    
                var xg = Ext.grid;
    
                var reader = new Ext.data.Record.create({
                    fields: [
                         { name: 'seattype', type: 'string' },
                         { name: 'quantity', type: 'float' },
                         { name: 'mrc', type: 'float' },
                         { name: 'nrc', type: 'float' },
                         { name: 'extmrc', type: 'float' },
                         { name: 'extnrc', type: 'float' }
                    ]
    
                });
             // Ext.grid.GridView.c
                // define a custom summary function
                Ext.grid.GridSummary.Calculations['totalExtMrc'] = function(v, record, field) {
                    return v + (record.data.mrc * record.data.quantity);
                }
                Ext.grid.GridSummary.Calculations['totalExtNrc'] = function(v, record, field) {
                    return v + (record.data.nrc * record.data.quantity);
                }
    
                var summary = new Ext.grid.GridSummary();
    
                var grid = new xg.EditorGridPanel({
                    
    
                    columns: [
                         {
                             id: 'seattype',
                             header: "Seat Type",
                             width: 80,
                             sortable: true,
                             dataIndex: 'seattype',
                             summaryType: 'count',
                             hideable: false                         
                         },
                         {
                             header: "Quantity",
                             width: 20,
                             sortable: true,
                             dataIndex: 'quantity',
                             summaryType: 'sum',
                         //    renderer: function(v) {
                         //        return v + ' hours';
                         //    },
                             editor: new Ext.form.NumberField({
                                 allowBlank: false,
                                 allowNegative: false,
                                 style: 'text-align:left'
                             })
                         }, {
                             header: "MRC",
                             width: 20,
                             sortable: true,
                             renderer: Ext.util.Format.usMoney,
                             dataIndex: 'mrc',
                             summaryType: 'average'                         
                         }, {
                             header: "NRC",
                             width: 20,
                             sortable: true,
                             renderer: Ext.util.Format.usMoney,
                             dataIndex: 'nrc',
                             summaryType: 'average'
                         }, {
                             id: 'extmrc',
                             header: "EXT.MRC",
                             width: 20,
                             sortable: false,
                             groupable: false,
                             renderer: function(v, params, record) {
                                 return Ext.util.Format.usMoney(record.data.mrc * record.data.quantity);
                             },
                             dataIndex: 'extmrc',
                             summaryType: 'totalExtMrc',
                             summaryRenderer: Ext.util.Format.usMoney
                         }, {
                             id: 'extnrc',
                             header: "EXT.NRC",
                             width: 20,
                             sortable: false,
                             groupable: false,
                             renderer: function(v, params, record) {
                                 return Ext.util.Format.usMoney(record.data.nrc * record.data.quantity);
                             },
                             dataIndex: 'extnrc',
                             summaryType: 'totalExtNrc',
                             summaryRenderer: Ext.util.Format.usMoney
                         }
                    ],
    
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
                        showGroupName: false,
                        enableNoGroups: false, // REQUIRED!
                        hideGroupedColumn: true
                    }),
    
                    plugins: summary,
    
                    frame: true,
                    width: 800,
                    height: 450,
                    clicksToEdit: 1,
                    collapsible: true,
                    animCollapse: false,
                    trackMouseOver: false,
                    //enableColumnMove: false,
                    title: 'HostedVoIPGUI',
                //    iconCls: 'icon-grid',
                    renderTo: document.body
                });
          
    
            Ext.grid.dummyData = [
                        {seattype: 'Basic Seats', mrc: 17, nrc : 59},
                        { seattype: 'Conference Room Seats', mrc: 22, nrc: 59 },
                        { seattype: 'Standard Seats', mrc: 22, nrc: 59 },
                        { seattype: 'Premium Seats', mrc: 25, nrc: 59 },
                        { seattype: 'Receptionist Seats', mrc: 25, nrc: 59 },
                        { seattype: 'Hunt Group', mrc: 1, nrc: 4.95 },
                        { seattype: 'Auto Attendant', mrc: 10, nrc: 14.95 },
                        { seattype: 'Anywhere Number(s)', mrc: 10, nrc: 21.95 },
                        { seattype: 'Softphone', mrc: 49.95, nrc: 0.00 },
                        { seattype: 'Receptionist Software Console', mrc: 0, nrc: 49 },
                        { seattype: 'Voice Mail (TUI Only)', mrc: 0, nrc: 5.95 },
                        { seattype: 'Available TNs', mrc: 0, nrc: 4.95 }
                ] ;