1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    2
    Vote Rating
    0
    sibauchi is on a distinguished road

      0  

    Default All my pages can not view when a tab meets error

    All my pages can not view when a tab meets error


    Hi all,

    I built my application by using ExtJs + Struts2.

    My page is created by TabPanel. And now I meet a problem.

    1. Firstly, I click a link from tree node to generate a new tab.

    2. application will load and back the data from DB to display them in page

    3. but when the pag in new tab contains some errors or bugs, the page will always display "Loading..." and I can not do anything with it. If I try to click other tab, the page will not change anything, still is "Loading...".

    following is the code of tabpanel:
    Code:
     clickTree: function(node){
            if(!node.isLeaf()){   
                return false;   
            }
            var id = 'tab-' + node.id;
            var tab = Ext.getCmp(id);
            if(!tab){
                tab = this.body.add(new Ext.Panel({
                    id: id,
                    title: node.text,
                    layout: 'fit',
                    closable: true
                }));
                this.body.setActiveTab(tab);
                
                this.loadModel(node.id,tab);
            }else{
                this.body.setActiveTab(tab);
            }  
     }
    Could anybody help me? and thx very much.
    Last edited by aconran; 10 Apr 2009 at 4:40 AM. Reason: Added [code] tags

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Open up Firebug, go to the script tab and turn on the break on all errors option.

    You should now probably see some errors which are occuring in the console. Use these to post a stack trace so that we can help you. Also please post your code in code tags as it will help you get a quicker response.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    2
    Vote Rating
    0
    sibauchi is on a distinguished road

      0  

    Default


    Hi, Aaron,

    Thank you very much for your harmful reply.

    I think maybe I can discribe my problem as the following:

    on my home page, the right of it is a tree menu in which content 2 page: pageA and pageB. When I click the link on the tree, it will open a new page built by TabPanel on the left.

    So my problem is: pageA was deployed under right configuration, but the configuration of pageB was error. Then if I click the link of pageA on the tree menu, it can be displayed right. But when I click the link of pageB, because of the error of wrong configuration, it will show me a LOADING page ALWAYS, even I click the opened pageA or close all page.

    Following is the sourcecode of the main page:

    -------------------------------------------------------------------------
    Code:
    /**
    * Main App
    * Description: Construct Main Application Layout
    **/
     
    Ext.namespace('eleave.main');
    eleave.main.module = function(tab){
     this.main = tab;
     this.init();
    }
    Ext.extend(eleave.main.module, Ext.util.Observable, {
     init: Ext.emptyFn
    });
    eleave.main.app = function(){
     this.init();
    }
    Ext.extend(eleave.main.app, Ext.util.Observable, {
     init: function(){
      this.tree = new Ext.tree.TreePanel({
       region:'west',
       header: true,
       collapsible:true,
                margins:'0 0 2 2',
                width: 185,
                split:true,
                minSize: 100,
                maxSize: 300,
                autoScroll:true,
                bodyStyle:'padding:10px',
                loader: new Ext.tree.TreeLoader({
              url: 'tree/tree.txt', //temporarilly for dummy file
              requestMethod: 'GET'
          }),
          
       root: new Ext.tree.AsyncTreeNode({
           id: 'root',
           text: 'Functions',
        expanded: true
       }),
       
       bbar : [{
        text : '<span style="font:bold;">Begin</span>',
        height:100,
        iconCls : 'icon-start',
        menu : new Ext.menu.Menu({
         items : [{
          text : 'About System',
          iconCls : 'icon-info',
          handler : function() {
          }
         }, {
          text : 'Logout',
          iconCls : 'icon-logout',
          handler : function() {
          }
         }]
        })
       }]
       
      });
      
      this.tree.on('click', this.clickTree, this);
      
      var tab = new Ext.Panel({
       title: 'Home',   
                id: 'docs',
                bodyStyle:'padding:10px',
                autoLoad: 'docs.html', //temporarilly for the home page
                layout: 'fit'  
      });
      
      this.body = new Ext.TabPanel({
       region:'center',   
                margins:'0 2 2 0',
                activeTab: 0,
                autoScroll: true,   
                items: [tab],
                //resizeTabs:false,
                width:1350,
                enableTabScroll:true
                //plugins: new Ext.ux.TabCloseMenu()
      });
      
      this.body.on('tabchange', this.changeTab, this);
      
      var viewPort = new Ext.Viewport({
       layout: 'border',
                items:[   
                    new Ext.BoxComponent({region:'north', el:'header', height:40}), 
                    this.tree,  
                    this.body
                ]
      });
      
      this.loadMask = new Ext.LoadMask(this.body.body);
     },
     
     changeTab: function(p, t){
            var id = t.id.replace('tab-','');
            var node = this.tree.getNodeById(id);
            if(node){
                this.tree.getSelectionModel().select(node);
            }else{
                this.tree.getSelectionModel().clearSelections();
            }        
     },
     
     clickTree: function(node){
            if(!node.isLeaf()){   
                return false;   
            }
            var id = 'tab-' + node.id;
            var tab = Ext.getCmp(id);
            if(!tab){
                tab = this.body.add(new Ext.Panel({
                    id: id,
                    title: node.text,
                    layout: 'fit',
                    closable: true
                }));
                this.body.setActiveTab(tab);
                
                this.loadModel(node.id,tab);
            }else{
                this.body.setActiveTab(tab);
            }  
     },
     
     loadModel: function(id,tab){
            var model;
            
            if(this[id]){
                model = new this[id](tab);
            }else{
                this.loadMask.show();   
                Ext.Ajax.request({
                    method:'GET',
                    url: 'js/eleave/'+id+'.js',
                    scope: this,
                    success: function(response){
                        this[id] = eval(response.responseText);
                        model = new this[id](tab);
                        this.loadMask.hide();
                    }
                });
            }
     }
    }); //eo Ext.extend(eleave.functions.main.app....
    Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
    Ext.form.Field.prototype.msgTarget = 'title';
    Ext.onReady(function(){  
        Ext.QuickTips.init();   
        eLeaveApp = new eleave.main.app();   
    });
    -----------------------------------------------------

    I upload several screenshot picture to show you the problem.

    pic1 is the pageA opened correctly;
    pic2 is the error pageB show LOADING messege
    pic3 is the page I switch back to the pageA but still show LOADING
    pic4 is the page I close all page I opened

    thanks again for you help
    Attached Images
    Last edited by sibauchi; 15 Apr 2009 at 10:29 PM. Reason: Added the code of tabpanel

  4. #4

Thread Participants: 2