EXT表格

晨曦之光 发布于 2012/03/09 14:49
阅读 281
收藏 0

由于这个比较大所以单独一文,

建议先看EXT基础

http://blog.csdn.net/21aspnet/article/details/6782028

最基本的表格

<html>
	<head>
		<title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script src="extjs/adapter/ext/ext-base.js"></script>
		<script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    Ext.onReady(function(){
               var cm = new Ext.grid.ColumnModel([
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var data = [
        ['1','男','甲','descn1'],
        ['2','女','乙','descn2'],
        ['3','女','丙','descn3'],
        ['4','男','丁','descn4'],
        ['5','女','戊','descn5']
    ];

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
       height:140,
       width:420

    });
    grid1.render();
});


                </script>


</head>
<body><div id="hello"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>


</body>
</html>


 

 

 

带单选框

<html>
	<head>
		<title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script src="extjs/adapter/ext/ext-base.js"></script>
		<script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    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 = false;
var data = [
        ['1','男','甲','descn1'],
        ['2','女','乙','descn2'],
        ['3','女','丙','descn3'],
        ['4','男','丁','descn4'],
        ['5','女','戊','descn5']
    ];

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
        sm: sm,
       height:160,
       width:450

    });
    grid1.render();
});


                </script>


</head>
<body><div id="hello"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>


</body>
</html>


加表头:

var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'员工信息表', height:160, width:450 }); 

单击事件:

<html>
	<head>
		<title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script src="extjs/adapter/ext/ext-base.js"></script>
		<script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    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 = false;
var data = [
        ['1','男','甲','descn1'],
        ['2','女','乙','descn2'],
        ['3','女','丙','descn3'],
        ['4','男','丁','descn4'],
        ['5','女','戊','descn5']
    ];

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
        sm: sm,
        title:'员工信息表',
       height:160,
       width:450

    });
    grid1.render();
    grid1.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('提示','当前选中的数据是:'+data);
}
</script>


</head>
<body><div id="hello"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>


</body>
</html>


 

添加右键菜单:

<html>
	<head>
		<title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script src="extjs/adapter/ext/ext-base.js"></script>
		<script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    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 = false;
var data = [
        ['1','男','甲','descn1'],
        ['2','女','乙','descn2'],
        ['3','女','丙','descn3'],
        ['4','男','丁','descn4'],
        ['5','女','戊','descn5']
    ];

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
        sm: sm,
        title:'员工信息表',
       height:160,
       width:450

    });
    grid1.render();
    grid1.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');
}
});



</script>


</head>
<body><div id="rightClickCont"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>


</body>
</html>

 

改变数据颜色:

<html>
    <head>
        <title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css"
            href="extjs/resources/css/ext-all.css" />
        <script src="extjs/adapter/ext/ext-base.js"></script>
        <script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    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',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = false;
var data = [
        ['1','男','甲','descn1'],
        ['2','女','乙','descn2'],
        ['3','女','丙','descn3'],
        ['4','男','丁','descn4'],
        ['5','女','戊','descn5']
    ];

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
        sm: sm,
       height:160,
       width:450

    });
    grid1.render();
});
function changeSex(value){
    if (value == '男') {
        return "<span style='color:red;font-weight:bold;'>男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>女</span>";
    }
}


                </script>


</head>
<body><div id="hello"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>


</body>
</html>


 

分页控件:

 

<html>
    <head>
        <title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css"
            href="extjs/resources/css/ext-all.css" />
        <script src="extjs/adapter/ext/ext-base.js"></script>
        <script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    Ext.BLANK_IMAGE_URL="resources/images/default/s.gif"

                  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.php'}),
        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,
        height:320,
       width:500,

        title: '分页演示',
        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();
})



                </script>


</head>
<body><div id="hello"></div>

<h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="grid3"></div><br/>
<div id="example-grid"></div>


</body>
</html>

data.php   这里就不从数据库取数据了,直接模拟

{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'}]}



 

表格被panel 控件HOLD住

<html>
    <head>
        <title>开始EXT</title>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css"
            href="extjs/resources/css/ext-all.css" />
        <script src="extjs/adapter/ext/ext-base.js"></script>
        <script src="extjs/ext-all-debug.js"></script>
                <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
                <script type="text/javascript">
                    Ext.BLANK_IMAGE_URL="resources/images/default/s.gif"

                  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.php'}),
        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,
        height:320,
       width:500,

        title: '分页演示',
        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();

    var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:500,
    height:400,
    items:[grid] //管理grid
});

})



                </script>


</head>
<body><div id="panel"></div>


<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="grid3"></div><br/>
<div id="example-grid"></div>


</body>
</html>


===========================================================================

 

扩充阅读:

如何用三种基本类型的数据(Array, Json, Xml)来创建最简单的表格
最简单的表格由以下几个元素组成:
1. 列定义(ColumnModel)
    首先我们知道表格肯定是二维的,横着叫行,竖着叫列。跟设计数据库,新建表一样,我们要先设置这个表有几列,每列叫啥名字,啥类型,咋显示,这个表格的骨架也就出来了。这里我们建立一个四列的表格,第一列叫编号(id),第二列叫性别(sex),第三列叫名称(name),第四列叫描述(descn)。

    // 定义一个ColumnModel
    var cm = new  Ext.grid.ColumnModel([
        {header:
'编号',dataIndex:'id'
},
        {header:
'性别',dataIndex:'sex'
},
        {header:
'名称',dataIndex:'name'
},
        {header:
'描述',dataIndex:'descn'
}
    ]);
    cm.defaultSortable 
= true
;

 

其中,cm.defaultSortable = true;这句话表示默认为可排序的表格,可以先不要去管它

2. 数据(Data)
    有了表格的骨架,现在我们要向里边添加数据了。这个数据当然也是二维了,下面分别介绍三种数据类型的使用方法:
(1) Array Data

 

    // ArrayData
    var data =  [
        [
'1','male','name1','descn1'
],
        [
'2','male','name1','descn2'
],
        [
'3','male','name3','descn3'
],
        [
'4','male','name4','descn4'
],
        [
'5','male','name5','descn5'
]
    ];

 

(2) Json Data

 

    //JsonData
    var people =  { 
        
'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'
 }
        ],
        
'musicians'
: [
            { 
'id''1''name''Clapton''descn''guitar'
 },
            { 
'id''2''name''Rachmaninoff''descn''piano'
 }
        ]
       }

 

(3) Xml Data
    Xml类型的数据一般是由一个.xml文件提供的,通过http请求的方式得到。

3. 数据的读取
    定义好数据之后,我们需要将其转换为能够为grid所用的页面,ext为咱们提供了一个桥梁,Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换三种数据的。
(1) ArrayReader

 

    // ArrayReader
    var ds1 = new  Ext.data.Store({
        proxy: 
new
 Ext.data.MemoryProxy(data),
        reader: 
new
 Ext.data.ArrayReader({}, [
            {name: 
'id'
},
            {name: 
'sex'
},
            {name: 
'name'
},
            {name: 
'descn'
}
        ])
    });
    ds1.load();

 

    ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
    现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。 Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫 sex,第三个叫name,第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
记得要执行一次ds.load(),对数据进行初始化。


(2) JsonReader

 

    // JsonReader
    var ds2 = new  Ext.data.Store({
        proxy: 
new
 Ext.data.MemoryProxy(people),
        reader: 
new Ext.data.JsonReader({root: 'coders'
}, [
            {name: 
'id'
},
            {name: 
'sex'
},
            {name: 
'name'
},
            {name: 
'descn'
}
        ])
    });
    ds2.load();

 

其中,root: 'colders'表示取数据的时候取的是'coders'这个节点的数据,而不是'musician'

(3) XmlReader

 

    // XmlReader
    var ds3 = new  Ext.data.Store({
        url: 
'test.xml'
,
        reader: 
new Ext.data.XmlReader({record: 'item'
}, [
            {name: 
'id'
},
            {name: 
'sex'
},
            {name: 
'name'
},
            {name: 
'descn'
}
        ])
    });
    ds3.load();

 

其中,record: 'item'表示每条记录对应的节点是'item',下面我会给出test.xml文件的内容,便于更好的理解

test.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     
<results>2</results>
     
<item>
           
<id>1</id>
          
<sex>male</sex>
           
<name>Taylor</name>
           
<descn>Coder</descn>
     
</item>
     
<item>
           
<id>2</id>
          
<sex>female</sex>
           
<name>Sophia</name>
           
<descn>Civil Servant</descn>
    
</item>
    
<item>
           
<id>3</id>
          
<sex>male</sex>
           
<name>Taylor</name>
           
<descn>Coder</descn>
     
</item>
     
<item>
           
<id>4</id>
          
<sex>female</sex>
           
<name>Sophia</name>
           
<descn>Civil Servant</descn>
    
</item>
    
<item>
           
<id>5</id>
          
<sex>female</sex>
           
<name>Sophia</name>
           
<descn>Civil Servant</descn>
    
</item>
</dataset>

 

4. 下面组装数据,也分三个表格来显示

 

    // 对应Array
    var grid1 = new  Ext.grid.GridPanel({
        el: 
'grid1'
,
        ds: ds1,
        cm: cm
    });
    grid1.render();
    
    
// 对应Json

    var grid2 = new  Ext.grid.GridPanel({
        el: 
'grid2'
,
        ds: ds2,
        cm: cm
    });
    grid2.render();
    
    // 对应Xml

    var grid3 = new  Ext.grid.GridPanel({
        renderTo: 
'example-grid'
,
        ds: ds3,
        cm: cm,
        title: 
'HelloWorld'
,
        autoHeight: 
'true'

    })

 

其中,grid1和grid2中都有个el属性以及render()方法,这个意思是,当执行该方法的时候,会自动去找页面中id=xxx的标签,然后在里面插入表格;效果跟grid3中的方式是一样的。

获取单选框选择值

buttons:[{
			text:'开始查询',
			 handler: function(){
			var selectedRows = grid.getSelections();
			if(selectedRows.length<1){
				
                                alert("请选择事件");
                                return;
			}
			var eventIds = '';
			for(i=0;i<selectedRows.length;i++){
				eventIds+= selectedRows[i].data.name+',';
			}
			alert(eventIds)

                       }
		}]


 

 


原文链接:http://blog.csdn.net/21aspnet/article/details/6859149
加载中
返回顶部
顶部