如何在extjs的Grid view列中添加按钮? [英] How to add button in Grid view column in extjs?

查看:521
本文介绍了如何在extjs的Grid view列中添加按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在创建新行时,一个字段应该包含一个在扩展JS中动态创建的按钮。



每个按钮都应该包含不同的名称和动作侦听器。
列应该像图片中给出的那样。




$ {
xtype:'gridpanel',
列:[
{text:'NAME',dataIndex:'name',width:100},
{text:'SURNAME',dataIndex:'surname',width:100},
{
text :'DELETE',
align:'center',
xtype:'actioncolumn',
items:[
{
xtype:'button',
text:'DELETE ME',
scale:'small',
处理程序:function(){
alert(Hello World!);
}
}
]
}
]
}

Nex尝试次数:



  {
xtype:'gridpanel',
列:[
{text:'NAME',dataIndex:'name',width:100},
{text:'SURNAME ',dataIndex:'surname',width:100},
{
renderer:function(val,meta,rec){
//为元素生成唯一的ID
var id = Ext.id();
Ext.defer(function(){
Ext.widget('button',{
renderTo:id,
text:'DELETE',
scale:'小'​​,
处理程序:function(){
Ext.Msg.alert(Hello World)
}
});
},50);
return Ext.String.format('< div id ={0}>< / div>',id);
}
}
]
}


When new row is created, then one field should contain a button created dynamically in Extended JS.

Each button should contain different name and action listener. The column should like given in image.

解决方案

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
           text: 'DELETE',
           align: 'center',
           xtype: 'actioncolumn',
           items: [
               {
                  xtype: 'button',
                  text: 'DELETE ME',
                  scale: 'small',
                  handler: function() {
                      alert("Hello World!");
                  }
               }
           ]
       }
   ]
}

Nex Attempt :

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
          renderer: function(val,meta,rec) {
             // generate unique id for an element
             var id = Ext.id();
             Ext.defer(function() {
                Ext.widget('button', {
                   renderTo: id,
                   text: 'DELETE',
                   scale: 'small',
                   handler: function() {
                      Ext.Msg.alert("Hello World")
                   }
                });
             }, 50);
             return Ext.String.format('<div id="{0}"></div>', id);
          }
       }
   ]
}

这篇关于如何在extjs的Grid view列中添加按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆