extjs中在GridPanel上添加一个搜索框 (文本框+按钮)怎么实现啊。。

extjs中在GridPanel上添加一个搜索框 (文本框+按钮)怎么实现啊。。,第1张

直接配置到工具条tbar里就行了:

var grid = new Ext.grid.GridPanel({

id: "grid1",

title: "GridPanel实例",

renderTo: "div1",

width: 500,

height: 300,

frame: true,

tbar: [{xtype:'label',text:'请输入关键词:'},{xtype:'textfield',id:'KeyWord'},{text:'搜索',handler:function(){alert("搜索")}}

],

。。。。。//其它配置项

})

var grid = new Ext.grid.GridPanel({ cm : new Ext.grid.ColumnModel([{header : '按钮,xtype : 'actioncolumn',width : 90,align : 'center',items : [{text: '按钮'}]}])})

参考帮助文档: actioncolumn

Ext.create('Ext.data.Store', {

storeId:'employeeStore',

fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],

data:[

{firstname:"Michael", lastname:"Scott"},

{firstname:"Dwight", lastname:"Schrute"},

{firstname:"Jim", lastname:"Halpert"},

{firstname:"Kevin", lastname:"Malone"},

{firstname:"Angela", lastname:"Martin"}

]

})

Ext.create('Ext.grid.Panel', {

title: 'Action Column Demo',

store: Ext.data.StoreManager.lookup('employeeStore'),

columns: [

{text: 'First Name', dataIndex:'firstname'},

{text: 'Last Name', dataIndex:'lastname'},

{

xtype:'actioncolumn',

width:50,

items: [{

icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config

tooltip: 'Edit',

handler: function(grid, rowIndex, colIndex) {

var rec = grid.getStore().getAt(rowIndex)

alert("Edit " + rec.get('firstname'))

}

},{

icon: 'extjs/examples/restful/images/delete.png',

tooltip: 'Delete',

handler: function(grid, rowIndex, colIndex) {

var rec = grid.getStore().getAt(rowIndex)

alert("Terminate " + rec.get('firstname'))

}

}]

}

],

width: 250,

renderTo: Ext.getBody()

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11390115.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存