http://topic.csdn.net/u/20100517/11/377b9a5f-fb32-4f44-813c-89fe325d7186.html
1.Ext.Ajax.request({
2. url:'getPath.action',
3. success:function(res){
4. var obj = Ext.decode(res.responseText);
5. //console.log(obj);//可以到火狐的firebug下面看看obj里面的结构
6. //加入getPath返回的json为{'path':'upload/abc.jpg'}
7. window.location.href = obj.path;//这样就可以弹出下载对话框了
8. }
9.});
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,曾经写了不少这方面的代码,
以上代码是现写的,调试通过,
以后大家可以讨论讨论
分享到:
相关推荐
在EXTJS的Grid组件中,我们可以监听各种事件,如`cellclick`事件,当用户点击网格的单元格时,此事件会被触发。下面是一个简单的示例,展示了如何监听`cellclick`事件并获取点击的单元格数据: ```javascript grid....
在EXTJS中,数据网格(Grid)是一种常用的数据展示组件,它能够以表格形式展示大量数据,并支持排序、分页、过滤等多种操作。要将GRID中的数据导出为Excel,我们需要涉及以下几个关键步骤: 1. **数据准备**:首先...
4. **事件对象**:EXTJS的事件对象包含有关事件的详细信息,如`event.target`可以获取触发事件的元素,`event.xy`获取鼠标点击位置等。 5. **事件分离与移除**:使用`removeListener`(或简写`un`)方法可以移除...
在第一种方法中,我们首先创建一个`Ext.menu.Menu`对象,然后通过监听Grid的`rowcontextmenu`事件来触发菜单的显示。以下是一个简单的示例: ```javascript // 创建菜单 var menu = new Ext.menu.Menu({ items: [ ...
- **事件监听和触发机制**: 提供丰富的事件接口,允许组件间的交互和响应用户操作。 - **Ajax 请求**: 内置的 Ajax 功能,支持异步数据通信。 6. **其他特性** - **Drag & Drop**: 支持元素的拖放操作,可应用于...
在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将详细介绍如何在ExtJS中实现ToolTip,并通过...
- **用户事件(User Events)**:包括鼠标点击、键盘输入等用户触发的事件。 - **系统事件(System Events)**:例如AJAX请求的状态变化(开始、完成、失败等)。 ExtJS提供了一个强大的事件管理系统,允许开发者轻松地...
这种交互设计是基于`column.resize`事件实现的,当用户释放鼠标后,该事件会被触发,我们可以监听这个事件来获取当前列的宽度信息。 3. **列顺序的改变**:用户可以通过拖拽列头到新的位置来改变列的顺序。这依赖于...
- 命名空间是Extjs中组织代码的一种方式,用于避免全局变量冲突。 - 使用`Ext.namespace`方法来定义命名空间。 - **Extjs OOP** - Extjs提供了一套面向对象的编程模型,支持类的继承、封装等特性。 - 通过`Ext....
- **事件(Event)**:事件是 ExtJS 中最基本的概念之一,用于处理用户与界面之间的交互。例如,当用户点击按钮时触发的事件。 - **组件(Component)**:组件是 ExtJS 中构建用户界面的基本单位。每个组件都有自己的...
在本案例中,我们将讨论如何实现一个非常简单易用的功能,即当鼠标移动到GridView的某一行或者用户点击某一行时,该行的背景色发生变化。这个功能可以提升用户的交互体验,使用户更易于区分当前选中的行。 首先,`...
`Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的数据源。 - **columns**: 列配置模型,可以通过配置来定义每...
在本文中,我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库,它基于ExtJS库,并提供了丰富的UI组件和便捷的API,使得开发者能够快速构建交互式的企业级Web应用。 ...
- **事件对象**:当事件触发时,可以通过事件对象获取更多信息,如触发事件的目标元素、鼠标位置等。 - **阻止默认行为**:使用 `event.preventDefault()` 阻止事件的默认行为,例如点击链接时不跳转。 - **停止事件...
- **传递参数**:事件处理函数还可以接收来自触发事件的元素的信息作为参数。 #### 十二、类设计与表单组件入门 - **对象创建**:在 EXT 中,可以使用面向对象的方式创建组件,这有助于代码的组织和复用。 - **使用...