ext2.0的组件中嵌入html语句，要怎么触发其中的按钮？？

我在ext的item里面用html语句写了一个按钮，现在要做成单击按钮弹出窗口的效果，我单击红色字体那个按钮时可以弹出，可我想要的是单击蓝色字体的那个按钮弹出窗口，这个要怎么做？？？
这是html页面
<script type="text/javascript">
   Ext.onReady(function(){
    new Ext.Panel({
    renderTo:'tablelayout',
    title:'桌台信息维护',
id:'table_list',
    layout:'table',
autoScroll:true,
    layoutConfig:{
     columns:4,
     activeOnTop: true,
     animate:true    
    },
defaults: {frame:true,width:241, height: 270},
    items:[
    {title:'1号桌',html:'<img src="table_white.png" width="240" height="200"/><input type="button" id="show-btn" value="详细"/>'}
     ]
 });
  });  
</script>
<body>
<div id="tablelayout"></div>
<div id="hello-win">
   
</div>
<input type="button" id="show-btn" value="详细"/></body>test.js如下Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
 var ProgramForm = new Ext.FormPanel({
labelSeparator : "：",//元素分隔符为:
frame:true,
border:false,//无边框
items : [
     {
xtype:'textfield',
width : 200,
readOnly:true,
name : 'table_number',//定义元素名称
fieldLabel:'就餐桌号'
},{
    xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'到桌时间'
},{
    xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'上菜时间'
},{
    xtype:'textarea',
   width:200,
readOnly:true,
grow:true,
preventScrollbars:true,
name : 'table_vagetable',//定义元素名称
fieldLabel:'所点菜品'
},{
    xtype:'textfield',
   width:200,
readOnly:true,
name : 'table_totalPrice',//定义元素名称
fieldLabel:'总价'
},{
    xtype:'textfield',
   width:200,
readOnly:true,
name : 'table_totalPrice',//定义元素名称
fieldLabel:'总价'
},{
    xtype:'textfield',
   width:100,
readOnly:true,
name : 'table_ifVip',//定义元素名称
value:'是',
fieldLabel:'是否VIP'
}
],buttonAlign:'right',
  buttons:[{
text:'返回',
handler: function(){
                        win.hide();
                    }
}]
});
            var win = new Ext.Window({
            el: 'hello-win',
            layout: 'fit',
            width: 350,
           title: '桌台详情',
           height: 400,
           closeAction: 'hide',
   resizable : false,
   shadow : true,
   modal :true,
   closable:true,//有关闭按钮
   bodyStyle:'padding:5 5 5 5',
   animCollapse:true,
           items: [ProgramForm]
    });
        }
        win.show(this);
    });
});

解决方案 »

  1.   

    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css"
    href="ext-2.2/resources/css/ext-all.css"></link>
    <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2/ext-all.js"></script>
    </head>
    <body>
    <div id="tablelayout"></div>
    <div id="hello-win"> </div>
    <!-- id不能和下边Ext的那个html里的id重了 -->
    <input type="button" id="show-btn1" value="详细1"/> </body>
    <script type="text/javascript" language=javascript>
    Ext.onReady(function()
    {
    var win; 
    //提出showWin方法 方便调用
    var showWin = function()
    {
    if (!win)
    {
    var ProgramForm = new Ext.FormPanel({
    labelSeparator : "：",// 元素分隔符为:
    frame : true,
    border : false,// 无边框
    items : [{
    xtype : 'textfield',
    width : 200,
    readOnly : true,
    name : 'table_number',// 定义元素名称
    fieldLabel : '就餐桌号'
    }, {
    xtype : 'textfield',
    width : 200,
    readOnly : true,
    name : 'table_time',// 定义元素名称
    fieldLabel : '到桌时间'
    }, {
    xtype : 'textfield',
    width : 200,
    readOnly : true,
    name : 'table_time',// 定义元素名称
    fieldLabel : '上菜时间'
    }, {
    xtype : 'textarea',
    width : 200,
    readOnly : true,
    grow : true,
    preventScrollbars : true,
    name : 'table_vagetable',// 定义元素名称
    fieldLabel : '所点菜品'
    }, {
    xtype : 'textfield',
    width : 200,
    readOnly : true,
    name : 'table_totalPrice',// 定义元素名称
    fieldLabel : '总价'
    }, {
    xtype : 'textfield',
    width : 200,
    readOnly : true,
    name : 'table_totalPrice',// 定义元素名称
    fieldLabel : '总价'
    }, {
    xtype : 'textfield',
    width : 100,
    readOnly : true,
    name : 'table_ifVip',// 定义元素名称
    value : '是',
    fieldLabel : '是否VIP'
    }],
    buttonAlign : 'right',
    buttons : [{
    text : '返回',
    handler : function()
    {
    win.hide();
    }
    }]
    });
      

  2.   

    接上
    win = new Ext.Window({
    el : 'hello-win',
    layout : 'fit',
    width : 350,
    title : '桌台详情',
    height : 400,
    closeAction : 'hide',
    resizable : false,
    shadow : true,
    modal : true,
    closable : true,// 有关闭按钮
    bodyStyle : 'padding:5 5 5 5',
    animCollapse : true,
    items : [ProgramForm]
    });
    }
    win.show();
    }

    new Ext.Panel({
    renderTo : 'tablelayout',
    title : '桌台信息维护',
    id : 'table_list',
    layout : 'table',
    autoScroll : true,
    layoutConfig : {
    columns : 4,
    activeOnTop : true,
    animate : true
    },
    defaults : {
    frame : true,
    width : 241,
    height : 270
    },
    items : [{
    title : '1号桌',
    html : '<img src="table_white.png" width="240" height="200"/><input type="button" id="show-btn" value="详细"/>'
    }]
    });

    var button = Ext.get('show-btn'); //这个get（id）是针对Ext渲染后的那个东西做的
    button.on('click', showWin); //加事件
    document.getElementById('show-btn1').onclick = showWin; //要为dom元素本身加事件 得用原始的dom方法处理
    });
    </script>
    </html>
      

  3.   

    感觉很奇怪啊~按钮要用HTML？就是为了按钮里面加个图片？
    EXT的BUTTON也可以加图片啊~~
    好吧，言归正传：
    实现方法~
    写个一个方法比如：
    function action(){
    //你要触发的事件~比如弹出一个窗口就：
    ext.msg.alert("弹窗");
    }
    然后用
    <a href="#" onclick="action()">
    </a>
    把你的按钮括起来
    就是:
    html:'<a href="#" onclick="action()"><img src="table_white.png" width="240" height="200"/><input type="button" id="show-btn" value="详细"/></a>'
    明白了吗？