菜鸟请教 ext的一个例子

界面最上边为三个 按钮 “添加”，“修改”，“停用”然后下面是一个列表，字段分别为“序号”，“用户名”，“角色”，“名称”，“账户状态”
（注:列表数据不用连接数据库，在程序里面写的）
点击 添加按钮，弹出对话框，对话框的界面为“用户名”，"角色"（同列表）填写的文本框，下面三个按钮"添加"，“重置”，"关闭"
界面最下面是一个文本框 后面一个按钮“查询”，功能是按照名称查询列表另外，我自己在 EXT designer里面做了一个简单界面，copy到 .js文件中，页面引用这个js文件，页面中确无法显示，
代码如下：
Ext.MyGrid=Ext.extend(Ext.grid.GridPanel ,{
xtype:"grid",
title:"我的表格",
width:400,
renderTo:'uu',
height:253,
columns:[
{
header:"序号",
sortable:true,
resizable:true,
dataIndex:"id",
width:100
},
{
header:"用户名",
sortable:true,
resizable:true,
dataIndex:"customer",
width:100
},
{
header:"角色",
sortable:true,
resizable:true,
dataIndex:"role",
width:100
},
{
header:"名称",
sortable:true,
resizable:true,
dataIndex:"name",
width:100
},
{
header:"账户状态",
sortable:true,
resizable:true,
dataIndex:"status",
width:100
},
{
header:"备注",
sortable:true,
resizable:true,
dataIndex:"memo",
width:100
}
],
initComponent: function(){
this.tbar=[
{
id:"add",
text:"添加"
},
{
id:"renew",
text:"修改"
},
{
id:"delete",
text:"停用"
}
]
Ext.MyGrid.superclass.initComponent.call(this);
}
})
});望指教，谢谢

解决方案 »

  1.   

    1.确保HTML页面周有一个div的id名称为"uu"
    2.最后添加一句：MyGrid.render();
      

  2.   

    Extdesigner生成的只是一个js文件，如果要在界面中显示需要使用如下方法：
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
            <script type="text/javascript" src="./js/ext/ext-base.js"></script>
            <script type="text/javascript" src="./js/ext/ext-all.js"></script>
            <script type="text/javascript" src="./mygrid.js"></script>
            <script>
                Ext.onReady(function(){
                    var grid = new Ext.MyGrid();
                });
            </script>
            
        </head>
        <body>
            <div id="uu"></div>
        </body>
    </html>