如何在sencha-touch （暂时） simon grid column中放置button 并弹出popup界面

来源：互联网发布：电视直播app源码编辑：程序博客网时间：2024/05/01 11:42

Sencha Touch 交流 QQ 群 224711028

效果如下，省略号为button控件

grid下载地址https://github.com/mitchellsimoens

1.首先在simon grid上放置一个button，方法使用render的方法，代码如下：

在grid模板中放置一个带id号的div 映射出界面，然后在侦听事件中在将button映射到这个div中

header   : "Description",                mapping  : "Description",                style    : "text-align: left;",renderer : function(val) {meGridItemNum++;return val.substring(0,40)+"<div style='float:right;padding-top:22px' id='buttonEmite"+meGridItemNum+"'></div>" },flex:8

侦听事件中额代码：

listeners: {afterlayout:function(){ if (!isAfterrendered) { Ext.each(metricEventGridStore.data.items,//?MyStore????????????                            function(arrayItem, index) {new Ext.Button({                                    iconMask : true,                                    ui : 'plain',                                        iconCls : 'icnEllipsis',                                    renderTo : 'buttonEmite' + index,handler:function(btn, event) {decriptionOverlay.update("<p>  "+metricEventGridStore.getAt(index).get('Description')+"</p>");decriptionOverlay.setCentered(true);decriptionOverlayTb.setTitle('Description');decriptionOverlay.showBy(btn);}                                });                            });isAfterrendered=true; }}}

最后是popup界面的代码：

var decriptionOverlayTb = new Ext.Toolbar({            dock: 'top'        });                var decriptionOverlay = new Ext.Panel({            floating: true,            modal: true,            centered: false,            width: Ext.is.Phone ? 260 : 490,            height: Ext.is.Phone ? 220 : 480,            styleHtmlContent: true,            dockedItems: decriptionOverlayTb,            scroll: 'vertical',            //contentEl: 'lipsum',html:'<p>djfsfjdsds</p>',            cls: 'htmlcontent'        });

如此便可在simon grid中映射出一个带popup的button