<html> <head> <title>Debug Console</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="debug.css" /> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',width:35}, {header:'名称',dataIndex:'name',width:80}, {header:'描述',dataIndex:'descn',width:120} ]); var data = [ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, viewConfig: { forceFit: true } }); grid.on('mouseover',function(e){//添加mouseover事件 var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置 if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false) var record = store.getAt(index);//把这列的record取出来 var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化 var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象 rowEl.set({ 'ext:qtip':str //设置它的tip属性 },false); } }); var win = new Ext.Window({ id:'window', el:'window-win', layout:'fit', width:500, height:270, closeAction:'hide', items: [grid] }); win.show(); Ext.QuickTips.init();//注意,提示初始化必须要有 }); </script> </head> <body> <div id="window-win"> <div id="grid"></div> </body> </html>
ext中 grid鼠标悬停 效果
最新推荐文章于 2021-10-13 11:32:06 发布