Ext 重复显示问题

Question

我有这样一个超链接
管理员管理
fun的代码如下
[code="javascript"]
var fun = function() {

Ext.Ajax.request({
            url : 'admin.lwf?method=getAllAdmin',
            params : {
                action : 'getDate'
            },
            method : 'GET',
            success : function(result, request) {

                panel2.setTitle("管理员管理");

                var myData = eval(result.responseText);

                 function change(val){
                    if(val == 0){
                        return '<span style="color:green;">女</span>';
                    }else if(val == 1){
                        return '<span style="color:red;">男</span>';
                    }
                    return val;
                }
                function changeRole(val){
                    if(val == 1){
                        return '<span style="color:green;">普通用户</span>';
                    }else if(val == 2){
                        return '<span style="color:red;">管理员</span>';
                    }
                    return val;
                }       
                function wen(val){

                    return '<a href="#" onclick="return deletefun('+val+')">删除</a>';
                }

                // create the data store
                var store = new Ext.data.SimpleStore({
                            fields : [{
                                        name : 'nickname'
                                    }, {
                                        name : 'email'
                                    }, {
                                        name : 'password'
                                    }, {
                                        name : 'gender'
                                    }, {
                                        name : 'registerTime'
                                    }, {
                                        name : 'grade'
                                    }, {
                                        name : 'point'
                                    }, {
                                        name : 'role'
                                    }, {
                                        name : 'intro'
                                    },{
                                        name : 'opera'
                                    }]
                        });
                store.loadData(myData);


                // create the Grid
                var grid = new Ext.grid.GridPanel({
                            store : store,
                            columns : [{
                                        id : 'nickname',
                                        header : "昵称",
                                        width : 75,
                                        sortable : true,
                                        dataIndex : 'nickname'
                                    }, {
                                        header : "Email",
                                        width : 150,
                                        sortable : true,
                                        dataIndex : 'email'
                                    }, {
                                        header : "密码",
                                        width : 75,
                                        sortable : true,
                                        dataIndex : 'password'
                                    }, {
                                        header : "性别",
                                        width : 30,
                                        sortable : true,
                                        renderer:change,
                                        dataIndex : 'gender'
                                    }, {
                                        header : "注册时间",
                                        width : 150,
                                        sortable : true,
                                        dataIndex : 'registerTime'
                                    }, {
                                        header : "等级",
                                        width : 30,
                                        sortable : true,
                                        dataIndex : 'grade'
                                    }, {
                                        header : "积分",
                                        width : 30,
                                        sortable : true,
                                        dataIndex : 'point'
                                    }, {
                                        header : "角色",
                                        width : 60,
                                        sortable : true,
                                        renderer:changeRole,
                                        dataIndex : 'role'
                                    }, {
                                        header : "简介",
                                        width : 200,
                                        sortable : true,
                                        dataIndex : 'intro'
                                    },{
                                        header : "操作",
                                        width : 50,
                                        sortable : true,
                                        dataIndex : "opera",
                                        renderer:wen
                                    }

                            ],
                            stripeRows : true,
                            autoExpandColumn : 'nickname',
                            height : 350,
                            width : 'auto',
                            title : '管理员列表'
                        });

                grid.render('grid-example');

            },
            failure : function(result, request) {
                Ext.MessageBox.alert('Failed', 'Successfully posted form: '
                                + action.date);
            }
        });

}
[/code]
点击链接后会在panel2中显示
panel2 = new Ext.Panel({
title : "center",
autoDestroy:'true',
html : "

",
tools : [{
id : 'minimize',
handler : function(event, toolEl, panel) {

                        }
                    }, {
                        id : 'maximize'
                    }, {
                        id : 'close'
                    }]
        });

现在问题是：我连续点击链接两次的话，会在panel2中显示两个GridPanel，请问这是什么原因，应该怎么修改代码让GridPanel只显示
一次？

Answer 1

[code="html"]管理员管理 [/code]
这里我去掉了onclick事件,用ｅｘｔ动态注册事件

[code="js"]
//我帮你实现了,你可以参考一下,给你一个简单的思路,你自己解决也可以
//首先你给你要创建的GridPanel给定一个id
//然后你在要创建的函数中的第一句判断这个id的对象是否存在.不存则就创建,否则直//接返回,
/*
var fun = function() {
//假设GridPanel的id为 'gird'
if(Ext.get('grid')){
return;//有了直接就返回了,就不继续创建对象了:)
}

*/
Ext.onReady(function() {
var panel2 = new Ext.Panel({
renderTo : document.body,
title : "center",
autoDestroy : 'true',
html : "

",
tools : [{
id : 'minimize',
handler : function(event, toolEl, panel) {
}
}, {
id : 'maximize'
}, {
id : 'close'
}]
});

Ext.get('view-all').on('click', function() {
    if(Ext.get('grid')){
        return;
    }
    panel2.setTitle("管理员管理");
    var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
            ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
            ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
            ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
            ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am']];
    function change(val) {
        if (val == 0) {
            return '<span style="color:green;">女</span>';
        } else if (val == 1) {
            return '<span style="color:red;">男</span>';
        }
        return val;
    }
    function changeRole(val) {
        if (val == 1) {
            return '<span style="color:green;">普通用户</span>';
        } else if (val == 2) {
            return '<span style="color:red;">管理员</span>';
        }
        return val;
    }
    function wen(val) {
        return '<a href="#" onclick="return deletefun(' + val + ')">删除</a>';
    }
    var store = new Ext.data.SimpleStore({
        fields : [{
            name : 'nickname'
        }, {
            name : 'email'
        }, {
            name : 'password'
        }, {
            name : 'gender'
        }, {
            name : 'registerTime'
        }, {
            name : 'grade'
        }, {
            name : 'point'
        }, {
            name : 'role'
        }, {
            name : 'intro'
        }, {
            name : 'opera'
        }]
    });
    store.loadData(myData);
    var grid = new Ext.grid.GridPanel({
        id:'grid',
        store : store,
        columns : [{
            id : 'nickname',
            header : "昵称",
            width : 75,
            sortable : true,
            dataIndex : 'nickname'
        }, {
            header : "Email",
            width : 150,
            sortable : true,
            dataIndex : 'email'
        }, {
            header : "密码",
            width : 75,
            sortable : true,
            dataIndex : 'password'
        }, {
            header : "性别",
            width : 30,
            sortable : true,
            renderer : change,
            dataIndex : 'gender'
        }, {
            header : "注册时间",
            width : 150,
            sortable : true,
            dataIndex : 'registerTime'
        }, {
            header : "等级",
            width : 30,
            sortable : true,
            dataIndex : 'grade'
        }, {
            header : "积分",
            width : 30,
            sortable : true,
            dataIndex : 'point'
        }, {
            header : "角色",
            width : 60,
            sortable : true,
            renderer : changeRole,
            dataIndex : 'role'
        }, {
            header : "简介",
            width : 200,
            sortable : true,
            dataIndex : 'intro'
        }, {
            header : "操作",
            width : 50,
            sortable : true,
            dataIndex : "opera",
            renderer : wen
        }],
        stripeRows : true,
        autoExpandColumn : 'nickname',
        height : 350,
        width : 'auto',
        title : '管理员列表'
    });
    grid.render('grid-example');
});

});

[/code]