根据学习,了解了一些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实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...
"ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid...
2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...
Ext.grid.ColumnModel显示不正常
总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...
7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...
2. **获取EXT Grid数据**:EXT Grid的数据通常存储在store中,我们需要遍历store中的所有记录,获取需要导出的字段值。这些记录可以是当前页面的数据,也可以是所有页面的数据,取决于用户的需求。 3. **转换为...
"Ext grid 导出Excel"是一个常见需求,它涉及到了JavaScript库Ext JS中的数据网格组件(Ext Grid)与Microsoft Excel文件格式的交互。下面我们将深入探讨这个主题。 首先,Ext JS是一个强大的JavaScript UI框架,它...
本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中。 EXT Grid的核心是其数据模型(Data Model)和视图(View)。数据模型负责存储和管理数据,而视图则负责渲染这些数据到...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
5. **样式和格式处理**:EXT Grid中的数据显示有各种样式,如颜色、字体等。如果需要保留这些样式,可以使用XLSX.js的`cellStyles`选项。但是,这需要更复杂的处理,因为Excel的样式系统与EXT Grid的样式不完全相同...
### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...
此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
EXT 2.0 MessageBox 和 JavaScript 弹出窗口是两种在 Web 应用程序中常见的用户交互方式。它们允许开发者向用户展示信息、询问问题或获取输入。EXT 是一个流行的 JavaScript 框架,特别是它的 EXT JS 库,用于构建富...
5. 编辑功能:EXT Grid可以开启行内编辑或者弹出式编辑,方便用户直接在表格中修改数据。 6. Ajax集成:EXT Grid通过Ajax请求从服务器获取或提交数据,这使得页面能够在不刷新的情况下更新内容,提供了流畅的用户...
Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...
EXT-JS Grid是EXT-JS库中的一个核心组件,它被广泛用于展示和操作大量数据。Grid提供了一种高效、可定制的表格视图,允许用户进行数据浏览、排序、筛选、分页以及编辑。EXT Designer是Sencha公司提供的一个可视化...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...