利德曼孙茜图片:Ext框架的Grid使用介绍

Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
     {header:'编号',dataIndex:'id'},
     {header:'性别',dataIndex:'sex'},
     {header:'名称',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true},现在就来看看这个Ext.data.Store是如何转换三种数据的。1.二维数组：
// ArrayData
var data = [
     ['1','male','name1','descn1'],
     ['2','male','name1','descn2'],
     ['3','male','name3','descn3'],
     ['4','male','name4','descn4'],
     ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
         {name: 'sex',mapping: 1},
         {name: 'name',mapping: 2},
         {name: 'descn',mapping: 3}
     ])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。
记得要执行一次ds.load()，对数据进行初始化。
数据的显示显得非常简单：
HTML文件：

JS文件：
var grid = new Ext.grid.GridPanel({
     el: 'grid',
     ds: ds,
     cm: cm
});
grid.render();其显示结果为： 
2.如何在表格中添加CheckBox呢？var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动行号
    sm,//添加的地方
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
}); 
3. 如何做Grid上触发事件呢？
下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','当前选中的数据是'+data);
}4.如何做Grid中做出快捷菜单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//点击后触发的事件
            text: '右键菜单1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右键菜单2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下：
5.如何将一列中的数据根据要求进行改变呢？
比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;function changeSex(value){
    if (value == 'male') {
        return "红男";
    } else {
        return "绿女";
    }
}其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程：6.Json数据
至于这种数据的类型请大家自己看Ajax的书籍：
//JsonData
var data = {
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要写，否则显示的数据会少一行
});
grid.render();
7.使用XML数据：
注意，读取XML数据必须在服务器上进行。
XML数据test.xml的内容：


     2
    
           1
           male
           Taylor
           Coder
    
var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML数据
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});
8.从服务器获取数据和数据翻页控件
从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：
服务器文件data.asp:
<%
    start = cint(request("start"))
    limit = cint(request("limit"))    dim json
    json=cstr("{totalProperty:100,root:[")
   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>我们可以看到，这个页面会根据传入的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(){
    var sm = new Ext.grid.CheckboxSelectionModel();
   
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
   
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    grid.render();
}) 
10.如何在Grid的上方添加按钮呢？
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
}); 11.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});Panel必须有DIV存在。其包含的Component有items管理。 
posted @ 2008-11-02 11:05 付厚俊 阅读(116) | 评论 (0) | 编辑 收藏
   2008年10月21日
java NIO
     摘要: java nio的全称是java new I/O，即一个全新的I/O控制系统，它的API的包名为java.nio，是在jdk1.4后引入的。 nio之所以为为新，在于它并没在原来I/O的基础上进行开发，而是提供了全新的类和接口，除了原来的基本功能之外，它还提供了以下新的特征：         ? 多路选择的非封锁式...  阅读全文
posted @ 2008-10-21 17:44 付厚俊 阅读(31) | 评论 (0) | 编辑 收藏
   2008年10月20日
轻松实现Apache,Tomcat集群和负载均衡
 作者:罗代均 ldj_work#126.com,转载请保持完整性
环境说明
       Apache  :apache_2.0.55     1 个       Tomcat:  apache-tomcat-5.5.17 (zip版) 2个       mod_jk:: mod_jk-apache-2.0.55.so  1个第一部分：负载均衡    负载均衡，就是apache将客户请求均衡的分给tomcat1,tomcat2....去处理   1.安装apche,tomcat   http://httpd.apache.org/ 下载Apache 2.0.55    http://tomcat.apache.org/download-55.cgi 下载tomcat5.5 zip版本（解压即可，绿色版）   http://apache.justdn.org/tomcat/tomcat-connectors/jk/binaries/win32/jk-1.2.15/  下载mod_jk,注意和  apache版本匹配   按照jdk,我的路径为:E:\ide\apache\Apache2   解压两份Tomcat, 路径分别为 E:\ide\tomcat1,E:\ide\tomcat2
下载mod_jk 2.修改Apache配置文件http.conf   在apache安装目录下conf目录中找到http.conf   在文件最后加上下面一句话就可以了  include "E:\ide\apache\Apache2\conf\mod_jk.conf"
2. http.conf 同目录下新建mod_jk.conf文件，内容如下
  
#加载mod_jk Module
LoadModule jk_module modules/mod_jk-apache-2.0.55.so
#指定 workers.properties文件路径
JkWorkersFile conf/workers.properties
#指定那些请求交给tomcat处理,"controller"为在workers.propertise里指定的负载分配控制器
JkMount /*.jsp controller
3.在http.conf同目录下新建 workers.properties文件，内容如下
 
worker.list = controller,tomcat1,tomcat2  #server 列表
#========tomcat1========
worker.tomcat1.port=8009         #ajp13 端口号，在tomcat下server.xml配置,默认8009
worker.tomcat1.host=localhost  #tomcat的主机地址，如不为本机，请填写ip地址
worker.tomcat1.type=ajp13
worker.tomcat1.lbfactor = 1   #server的加权比重，值越高，分得的请求越多
#========tomcat2========
worker.tomcat2.port=9009       #ajp13 端口号，在tomcat下server.xml配置,默认8009
worker.tomcat2.host=localhost  #tomcat的主机地址，如不为本机，请填写ip地址
worker.tomcat2.type=ajp13
worker.tomcat2.lbfactor = 1   #server的加权比重，值越高，分得的请求越多#========controller,负载均衡控制器========
worker.controller.type=lb
worker.controller.balanced_workers=tomcat1,tomcat2   #指定分担请求的tomcat
worker.controller.sticky_session=1
4.修改tomcat配置文件server.xml
如果你在不同电脑上安装tomcat,tomcat的安装数量为一个，可以不必修改tomcat配置文件
我这里是在同一台电脑上安装两个tomcat，所以需要更改其中一个的设置
打开tomcat2/conf/server.xml文件
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/fengkuanghun/archive/2008/12/18/3551438.aspx