根据学习,了解了一些ext的知识,
显示出一个grid的时候,高手(牛逼人物)把ext写了个特效,就是当鼠标移到grid的记录的时候单行和双行颜色效果不一样,经过老师的讲解,在要修改ext内部的源码就可以实现那种效果,根据老师的讲解,现在自己也做了一个特效,就是将鼠标移到grid的记录时候,会弹出一个window窗体,并且窗体带一个panel当鼠标移到记录时,会将记录的值取出来,将值赋值给window里面的panel的表单去,并且还有自动收缩和自动扩展的功能,
唯一不足之处就是“本想让它鼠标移到grid记录时候弹出一个窗口,想让它停滞几秒让它关闭了!但是种种原因没有办法实现 1.我用close关闭window 但是鼠标再次移到记录的时候window就再也打不开了 2.用hide来隐藏window 但是你鼠标始终停滞在记录上,它一旦隐藏了马上就又出来了”求高手们给个答案。。。。。。
此代码直接拷贝是不能用的,因为grid的数据是用dwr去后台取出数据来!
大家可以自己定义grid在将弹出window的代码模仿写写 尝试解决上面的问题...
teacher.initListGrid = function(){
var colMap ={
id:'id',
columns:[
{id: "id",header: "<fmt:messagekey='teacher.id' />", hidden:true,hideable:false, dataIndex: 'id'},
{header: "<fmt:message key='teacher.name' />", width: 100, sortable: true, locked:false, dataIndex: 'name'},
{header: "<fmt:message key='teacher.sex' />", width: 100, sortable: true, locked:false, dataIndex: 'sex'},
{header: "<fmt:message key='teacher.addres' />", width: 100, sortable: true, locked:false, dataIndex: 'addres'},
header: "<fmt:message key='teacher.dataState' />", hidden:true ,width: 100, sortable: true, locked:false, dataIndex: 'dataState'} ]};//IE DELETE
var grid = teacher.listGrid = new Ext.grid.GridPanel({
colMap: colMap,
loadMask: {msg:'<fmt:message key="loadData.waitmsg"/>'},
stripeRows: true,
viewConfig: {
forceFit:true
},
showRowNumber:true,
border:false,
dwrFun:teacherManager.getTeachersByDwr,
showPagebar:true,
singleSelect :true,
//鼠标移到grid的数据时显示窗体
afterRender : function(){
this.on('mouseover',this.rowMouseOver,this,{buffer:500});},
rowMouseOver : function(e,t){
var view = this.view
var row = view.findRowIndex(t);
if(row!== false){
if(!this.win){
this.win = new Ext.Window({
id:'goods.win',
title : '内容',
width : 250,
autoHeight :true,
layout : 'fit',
border : false,
closeAction : 'hide',
items : new Ext.FormPanel({
id : 'form-panel',
frame : true,
autoHeight : true,
labelWidth : 80,
defaults : {
width : 100,
xtype : 'textfield'},
items : [{fieldLabel : 'id',name : 'id',readOnly:true,allowBlank:false},
{xtype:'box',autoEl:{style:'height:10px'}},
//将两个连接在一起的textfield分开
{fieldLabel : 'name',name : 'name',readOnly:true,allowBlank:false},
{xtype:'box',autoEl:{style:'height:10px'}},
{fieldLabel : 'sex',name : 'sex',readOnly:true,allowBlank:false},
{xtype:'box',autoEl:{style:'height:10px'}},
{fieldLabel : 'addres',name : 'addres',readOnly:true,allowBlank:false},
{xtype:'box',autoEl:{style:'height:10px'}},
{fieldLabel : 'dataState',name : 'dataState',readOnly:true,allowBlank:false}]
}),
//收缩小图标 以及实习的功能
tools : [{
id :'pin',
qtip : '禁用自动收缩',
hidden : true,
handler :
function(event, el, panel){
removeWinEvent ("goods.win");
Ext.getDom(panel.tools['pin'].id).style.display = "none";
Ext.getDom(panel.tools['unpin'].id).style.display = "block";
}
}, {
id :'unpin',
qtip : '启动自动收缩',
hidden : true,
handler :
function(event, el, panel){
setWinEvent("goods.win");
Ext.getDom(panel.tools['pin'].id).style.display = "block";
Ext.getDom(panel.tools['unpin'].id).style.display = "none";
}
}],
listeners : {
'beforeshow' : function(cmp) {
setWinEvent("goods.win");
}
}
});
//当启动自动收缩的时候的事件 就是鼠标移过去的时候就显示 移开的时候就收缩
function setWinEvent(winId) {
var winPanel = Ext.getCmp(winId);
Ext.get(winId).on('mouseover', function() {
if (winPanel.collapsed) {
winPanel.expand();
Ext.getDom(winPanel.tools['pin'].id).style.display = "block";
Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";
}
});
Ext.get(winId).on('mouseleave', function() {
if (!winPanel.collapsed) {
winPanel.collapse();
Ext.getDom(winPanel.tools['pin'].id).style.display = "none";
Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";
}
});
}
//移除事件
function removeWinEvent(winId){
Ext.get(winId).removeAllListeners();
};
}
//显示窗体的位置
this.win.setPosition(e.getXY());
//this.win.setPosition(2,200);
this.win.show();
//过2秒显示的窗体自动关闭
//this.win.close.defer(2000,this.win);
/*
//新建一个任务
var task = {
run: function(){
Ext.getCmp('goods.win').hide();
},
interval: 100 //秒 刷新一次
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
*/
/*
this.win.on("beforedestroy", function(obj) {
Ext.MessageBox.alert("信息", "想关闭我,那是不可能的"),
obj.show();
return false;
},this,{delay:2000});
*/
this.win.toFront();
this.fillData(this.getStore().getAt(row));
}
},
beforeDestroy : function(){
Ext.destroy(this.win);//摧毁win的窗体
},
//给窗体的form表单填入数据
fillData : function(record){
var form = Ext.getCmp('form-panel').getForm();
form.setValues(record.data);
}
});
}
代码在此。。。请牛人们多多指教...晚辈献丑了...
分享到:
相关推荐
Ext.grid.ColumnModel显示不正常
非常珍贵的初学者资源,详细的使用了ext的各种常用组件和类库,例子完完整整,能运行,数据库资源直接在配置文件里面写就行,是那种就换成什么,非常方便大家使用和参考。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
从右下角动态弹出window,显示1分钟后自动隐藏,然后再弹出,类似MSN登录提醒。
LearningExtJS 第五章节的翻译
通过 json 接收后台数据,在前台分页显示数据,这只是我整的一个例子哦,就是 dwr+ext
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
ext实验 主要 tree grid等学习记录ext 学习记录学习记录ext 学习记录学习记录ext 学习记录学习记录ext 学习记录
ext2.0MessageBox,JS弹出窗口
EXT中根据返回的grid中的状态列的内容来改变这一行显示的背景颜色
ext仿windows操作系统窗体嵌入桌面问题 一级模块窗体 Ext.override(MyDesktop.MyDictionaryWindow, { createFoodWindow : function(src) { var desktop = this.app.getDesktop(); var win = desktop....
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
Ext4 grid打印,打印预览,复杂表头打印,等等都实现了!
本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
EXT grid导出EXCEL,有事例,下载后直接可用
webservice提取数据 grid显示数据 csdn上feiyu0805做的,对Ext初学很有帮助, 我就上传了