ExtJs want to call some code after Ext.onReady() function

Question

In ExtJs we have a page load event named Ext.onReady() which is called after window.onload as it is registered to onload and than called. so basicly last event we can find is Ext.onReady().

The problem is that I have several Ext.onReady() for a bussiness reqiurment which we can't change. I have ExtJs TabbedPanel which is been reandered to the page which is in the last Ext.onReady() of the page.

What I want is to register some events on TabbedPanel after it is rendered to the page. Assume that you don't have control over the TabbedPanel's render event as well as you can't create onReady after last onReady of the page.

Answer 1

Ext.require([
'Ext.window.MessageBox',
'Ext.tip.*'
 ]);

Ext.onReady(function(){
Ext.get('mb1').on('click', function(e){
    Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});

Ext.get('mb2').on('click', function(e){
    Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
});

Ext.get('mb3').on('click', function(e){
    Ext.MessageBox.show({
       title: 'Address',
       msg: 'Please enter your address:',
       width:300,
       buttons: Ext.MessageBox.OKCANCEL,
       multiline: true,
       fn: showResultText,
       animateTarget: 'mb3'
   });
});

Ext.get('mb4').on('click', function(e){
    Ext.MessageBox.show({
       title:'Save Changes?',
       msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
       buttons: Ext.MessageBox.YESNOCANCEL,
       fn: showResult,
       animateTarget: 'mb4',
       icon: Ext.MessageBox.QUESTION
   });
});

Ext.get('mb6').on('click', function(){
    Ext.MessageBox.show({
       title: 'Please wait',
       msg: 'Loading items...',
       progressText: 'Initializing...',
       width:300,
       progress:true,
       closable:false,
       animateTarget: 'mb6'
   });

   // this hideous block creates the bogus progress
   var f = function(v){
        return function(){
            if(v == 12){
                Ext.MessageBox.hide();
                Ext.example.msg('Done', 'Your fake items were loaded!');
            }else{
                var i = v/11;
                Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
            }
       };
   };
   for(var i = 1; i < 13; i++){
       setTimeout(f(i), i*500);
   }
});

Ext.get('mb7').on('click', function(){
    Ext.MessageBox.show({
       msg: 'Saving your data, please wait...',
       progressText: 'Saving...',
       width:300,
       wait:true,
       waitConfig: {interval:200},
       icon:'ext-mb-download', //custom class in msg-box.html
       animateTarget: 'mb7'
   });
    setTimeout(function(){
        //This simulates a long-running operation like a database save or XHR call.
        //In real code, this would be in a callback function.
        Ext.MessageBox.hide();
        Ext.example.msg('Done', 'Your fake data was saved!');
    }, 8000);
});

Ext.get('mb8').on('click', function(){
    Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
});

//Add these values dynamically so they aren't hard-coded in the html
Ext.fly('info').dom.value = Ext.MessageBox.INFO;
Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
Ext.fly('error').dom.value = Ext.MessageBox.ERROR;

Ext.get('mb9').on('click', function(){
    Ext.MessageBox.show({
       title: 'Icon Support',
       msg: 'Here is a message with an icon!',
       buttons: Ext.MessageBox.OK,
       animateTarget: 'mb9',
       fn: showResult,
       icon: Ext.get('icons').dom.value
   });
});

function showResult(btn){
    Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};

function showResultText(btn, text){
    Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});