1.ext.grid详解参考地址:http://blog.sina.com.cn/s/blog_566c8d180100tnk1.html
2.Ext.onReady详解
http://blog.163.com/xiao_mege/blog/static/7294275320114553132762/
Ext2.0是一个JS框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。
//
var
]);
cm.defaultSortable
{header:'编号',dataIndex:'id',Sortable:true},
1.二维数组:
//
var
];
//
var
});
ds.load();
现 在用的是Ext.data.MemoryProxy,它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数 组,并且告诉我们它会按照定义的规范进行解析,每行按顺序读取四个数据,第一个叫id,第二个叫sex,第三个叫name,第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
HTML文件:
<div id='grid'></div>
JS文件:
var
});
grid.render();
其显示结果为:
2.如何在表格中添加CheckBox呢?
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
]);
var grid = new Ext.grid.GridPanel({
});
3.
下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
}
4.如何做Grid中做出快捷菜单效果:
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
});
function rightClickFn(grid,rowindex,e){
}
function rMenu1Fn(){
}
其Grid如下:
5.如何将一列中的数据根据要求进行改变呢?
比如说性别字段根据其male或female改变显示的颜色,这种ColumnMode中设计:
var cm = new Ext.grid.ColumnModel([
]);
cm.defaultSortable = true;
function changeSex(value){
}
6.Json数据
至于这种数据的类型请大家自己看Ajax的书籍:
var data = {
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
ds.load();
var grid = new Ext.grid.GridPanel({
});
grid.render();
7.使用XML数据:
注意,读取XML数据必须在服务器上进行。
XML数据test.xml的内容:
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
</dataset>var ds3 = new Ext.data.Store({
});
8.从服务器获取数据和数据翻页控件
从一个服务器文件,如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据,也可以被Ext读取,并被Grid显示:
服务器文件data.asp:
<%
%>
我们可以看到,这个页面会根据传入的start和limit的不同,返回不同的数据,其实质是个分页的代码。下面是start=0,limit=10的JSON数据:
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}
我们使用分页控件来控制Grid的数据:
Ext.onReady(function(){
})
10.如何在Grid的上方添加按钮呢?
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条:
var grid = new Ext.grid.GridPanel({
});
11.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
});
tabs.doLayout();
var panel = new Ext.Panel({
});
Panel必须有DIV存在。其包含的Component有items管理。
我们知道,只有在Ext框架全部加载完后才能在客户端的代码中使用Ext,而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后,所要执行的函数。
比如示例代码会在页面加载后执行函数a,弹出"Everything is ready."的提示信息。
- function a(){
- alert("Everything is ready.");
- }
- Ext.onReady(a);
可以在一个页面中多次调用onReady方法,则将会把这些方法放到事件队列中,依次执行; onReady的第三个参数是事件执行的一些特殊属性描述,可以是简单的true或false,也可以是一个对象,对象中可以包含delay、single、buffer等属性,比如在上面的代码中添加下面的代码:
- Ext.onReady(function(){alert("2")},this,{delay:5000});
则在页面加载完成后,执行了a方法中的内容,5秒后会执行上面onReady方法中的匿名函数。
作用域是javascript中一个比较关键的特性,我们可以在事件中执行某一个函数的执行的作用域,下面的代码演示了在onReady方法中使用作用域。
- var b1={v:"this is b1"};
- var b2={v:"this is b2"};
- function b()
- {
- alert(this.v);
- }
- Ext.onReady(b,b1);
- Ext.onReady(b,b2);
上面的代码直接调Ext类的onReady方法指定在页面加载完后执行函数b,函数b中的代码是输出当前对象的v属性值,执行这段代码可以看到onReady中作用域的效果。