动态加载它们时面板重叠 sencha答案

【问题标题】：panel overlapping while loading them dynamically sencha动态加载它们时面板重叠 sencha
【发布时间】：2012-06-03 10:32:15
【问题描述】：

我在工具栏上有几个选项卡，每个选项卡都有单独的处理程序，我已经调用了每个处理程序的单独函数。代码如下

Ext.define('myco.view.User', {
    extend: 'Ext.Container',
    config: {
        scrollable: true,
        items: [{
                xtype: 'panel',
                id: 'User'
            },

            {
            docked: 'top',
            xtype: 'toolbar',
            items: [{
                text: 'My Profile',
                handler: function() {
                    var panel = Ext.getCmp('User'),
                        tpl = new Ext.XTemplate([
                        '<div class="demo-weather">',
                            '<tpl for=".">',
                                '<div class="day">',
                                    '<div class="date">{username}</div>',
                                    '<tpl for="weatherIconUrl">',
                                        '<img src="{value}">',
                                    '</tpl>',
                                    '<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>',
                                '</div>',
                            '</tpl>',
                        '</div>'
                    ]);

                    panel.getParent().setMasked({
                        xtype: 'loadmask',
                        message: 'Loading...'
                    });

                    Ext.Ajax.request({
                        url: 'http://localhost:8000/api/myapp/user/',
                        method:'GET',
                        callbackKey: 'callback',
                        defaultHeaders : 'application/json',
                        params: {
                            //key: '23f6a0ab24185952101705',
                            //q: '94301', // Palo Alto
                            format: 'json',
                            //num_of_days: 5
                        },
                        success : function(response, opt) {
                                    dataarray = Ext.decode(response.responseText);
                                    weather=dataarray.objects;
                                    panel.updateHtml(tpl.applyTemplate(weather))
                                    panel.getParent().unmask();
                                    },
                        failure : function(response, opt) {
                                     Ext.Msg.alert('Failed', response.responseText);
                                     panel.getParent().unmask();
                                    }       


                    });
                }
            },
            {
                 text:'login',
                 handler: function() {
                     var main = new Ext.Panel({  
                                   title: 'My first panel', //panel's title  
                                   fullscreen: true,
                                   //the element where the panel is going to be inserted 
                                   //html: 'Nothing important just dummy text' //panel's content  
                                   items:[
                        {
                            xtype: 'fieldset',
                            title: 'Login',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Username',
                                    name:   'username',
                                    id  :  'username'
                                },
                                {
                                    xtype: 'passwordfield',
                                    label: 'Password',
                                    name:  'password',
                                    id   :  'password'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',

                            handler: function() {}

                        }
                    ]
                                   });  
                 panel.add(main);
                 alert('test');
                 }
            }
            ]
        }]
    }
});

现在当我点击选项卡时，前一个面板不会被清除，数据将在那里重叠.....就像我点击我的个人资料配置文件在那里列出，之后当我点击登录个人资料+登录时，两者都将是加载一个重叠另一个...

【问题讨论】：

所以您想在单击“登录”项时运行“我的个人资料”处理程序？
没有。我想在单击登录项时显示登录表单
您的登录表单是在哪里定义的？提供更多细节...
那么你的问题又是什么？您的代码似乎符合您的描述
请检查已编辑的问题，因为我现在面临小问题...如何清除面板？

标签： forms extjs panel

【解决方案1】：

您应该为此使用Ext.tab.Panel，将您的个人资料和登录面板定义为父TabPanel 的项目，切换将由ExtJS 处理。您可以使用面板的 activate 事件添加自定义逻辑，以便在您的选项卡被激活时执行。

【讨论】：