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.

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.

• javascript
• extjs

• 1 If you want to add events to the TabbedPanel I assume that you can get reference to this panel. So you can check if the panel is rendered: if (tabbedPanel.rendered) { doSth(); } else { tabbedPanel.on('afterrender', doSth); } – Krzysztof Commented Feb 12, 2012 at 12:21
• I have thought about your option as first priority , But In my case tabbed Panel it self is rendered on the Ext.onReady()!! and i dont have control to write nything after that tabbedPanel code.! seems starnge but it is.... (If you know about savvion!!). – Hardik Soni Commented Feb 14, 2012 at 5:16
• You can alway create onReady with some delay, or check for tabbed panel in interval. I don't see any better solution, because there is no other way to ensure that everything is rendered. – Krzysztof Commented Feb 14, 2012 at 7:48
• puting delay effects performace alot so i cant use that. i had that solution for last. – Hardik Soni Commented Feb 21, 2012 at 7:52

2 Answers 2

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)+'% pleted');
            }
       };
   };
   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);
};
});

Thanks for your replys friends. I have solved the issue.. For your information and for the your information m posting solution

I have created a callback method in java. which means it will be called from a perticular other function is called. I just checked the function which is taking most time to excetue and at last of that function created callback.

Problem is solved thanks.. :)