给页面字段中添加一个按钮，点击按钮实现弹窗效果

页面效果：

点击按钮后弹窗效果：

点击左上角搜索框效果：

页面实现代码

首先配置一个入住房间字段

       <field><header>入住房间</header><dataIndex>sendRoom</dataIndex><sortable>false</sortable><width>105</width>//其余属性不需要管 重点在于renderer中 <renderer>slms.sendRoom</renderer><editor>textfield</editor><columnIndex>12</columnIndex><hidden>false</hidden><exist>true</exist><locked>0</locked><frameXMLVersion>8D23023C35C6EE15955372DC77733838</frameXMLVersion></field>

/** 查看入住房间 */
//这个RegisterRender中的第一个属性的内容必须要和字段代码中的renderer内容保持一致
factory.RegisterRender("slms.sendRoom", function (data, cell, record, rowIndex, columnIndex, store) {//onclick的事件必须要和下面弹窗代码的名称一致 record.data.UUID是将人员的id传到弹窗中return "<button class='blueButton' οnclick='slms.sendRoomWindow(" + '"' + record.data.UUID + '"' + ")'>查看详情</button>";
});

弹窗代码

slms.sendRoomWindow = function (cfg) {//搜索框配置var _textQuery = factory.CreateWidget("searchfield", {onSearch: search,width: 200,emptyText: '请输入编号或者楼名称进行查询',plugins: new frame.plugin.KeyMapPlugin({type: 'window',key: fast.KEY_QUERY,fn: function () {_textQuery.focus(500, true)},})});//向后台传递参数function search() {_store.load({params: {query:cfg,},});};var _tbar = new Ext.Toolbar({});_tbar.add('-', _textQuery, '->');//请求接口  后台向前台传输数据的格式为List<Map>格式 自动填充弹窗字段内容var _store = new Ext.data.JsonStore({url: 'CustomerManagerAction!loadCustomerChenkRoomManager.action',method: 'post',tbar: _tbar,root: 'retList',//弹窗中显示的字段顺序fields: ['roomName', 'area', 'campus', 'buildingName','floor','sexName','checkNumber','bedNumber'],});var _grid = new Ext.grid.GridPanel(Ext.applyIf(cfg.gridcfg ? cfg.gridcfg : {}, {frame: false,// True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。autoScroll: true,// 滚动条closable: true,border: false,// True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。stripeRows: false,// True表示为显示行的分隔符（默认为true）。store: _store,tbar: _tbar,viewConfig: {forceFit: true},//弹窗中所有字段配置 dataIndex必须和实体类名称一致columns: [{header: "房间编号",width: 30,sortable: true,dataIndex: 'roomName'}, {header: "所属区域",width: 40,sortable: true,dataIndex: 'area'}, {header: "所属校区",width: 50,sortable: true,dataIndex: 'campus'}, {header: "楼名称",width: 50,sortable: true,dataIndex: 'buildingName'}, {header: "楼层",width: 30,sortable: true,dataIndex: 'floor'}, {header: "入住性别",width: 30,sortable: true,dataIndex: 'sexName'}, {header: "入住人数",width: 30,sortable: true,dataIndex: 'checkNumber'}, {header: "房间床位",width: 30,sortable: true,dataIndex: 'bedNumber'}],bbar: new Ext.PagingToolbar({pageSize: frame.pageSize,displayInfo: true,store: _store,plugins: [new Ext.ux.plugins.PageComboResizer(),new Ext.ux.ProgressBarPager()]})}));//弹窗配置var _win = new Ext.Window({title: '入住房间详情',width: 900,constrain: true,constrainHeader: true,modal: true,height: 600,layout: 'fit',border: false,items: [_grid]});//显示弹窗_win.show();return _win;
}

给页面字段中添加一个按钮，点击按钮实现弹窗效果相关推荐

vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
【转】博客美化(3)为博客添加一个漂亮的分享按钮
阅读目录 1.社会化分享 2.选择一个分享按钮 3.添加到博客园博客博客园美化相关文章目录:博客园博客美化相关文章目录在前2篇博客"博客美化(1)基本后台设置与样式设置"与&q ...
access数据库中怎么添加计算机,向access2007数据库中添加一个或多个记录
时间:2008-10-22 13:27:07 作者: 摘要:向Access2007数据库中添加一个或多个记录正文: 本文介绍如何向 Microsoft Office Access 2007 ...
php怎么添加会员卡,怎么在微信公众号中添加一个会员卡领取功能
怎么在微信公众号中添加一个会员卡领取功能发布时间:2020-12-09 16:06:27 来源:亿速云阅读:129 作者:Leah 这篇文章将为大家详细讲解有关怎么在微信公众号中添加一个会员卡领取 ...
在ABP解决方案中添加一个Core层的项目
1,在src目录下新建一个项目,类库,例如叫AbpDemo.Core.System, 然后修改项目属性,把命名空间修改回来为:AbpDemo 然后添加依赖,照着现有的领域层AbpDemo.Core添加 ...
如何在Microsoft Word中添加一个悬挂缩进
A hanging indent is used to position the first line of each paragraph against the margin, with each ...
R语言编写自定义函数、评估回归模型预测变量的相对重要性（Relative importance）、通过在所有可能的子模型中添加一个预测变量而获得的R方的平均增加、评估预测变量的重要度、并通过点图可视化
R语言编写自定义函数.评估回归模型预测变量的相对重要性(Relative importance).通过在所有可能的子模型中添加一个预测变量而获得的R方的平均增加.来评估预测变量的重要程度.并通过点图可 ...
Visual Stdio 无法直接启动带有“类库输出类型”的项目若要调试此项目，请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目！
Visual Stdio 无法直接启动带有"类库输出类型"的项目若要调试此项目,请在此解决方案中添加一个引用库项目的可执行项目.将这个可执行项目设置为启动项目! 参考文章: (1) ...
python在子类中添加新的属性_pycharm实现在子类中添加一个父类没有的属性
我就废话不多说了,还是直接看代码吧! class Car(): """一次模拟汽车的简单尝试""" def __init__(self, m ...

给页面字段中添加一个按钮，点击按钮实现弹窗效果

页面效果：

点击按钮后弹窗效果：

点击左上角搜索框效果：

页面实现代码

给页面字段中添加一个按钮，点击按钮实现弹窗效果相关推荐

最新文章

热门文章