頁面效果：

點擊按鈕后彈窗效果：

點擊左上角搜索框效果：

頁面實現代碼

首先配置一個入住房間字段

<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; }

總結

以上是生活随笔為你收集整理的给页面字段中添加一个按钮，点击按钮实现弹窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。