EXT表格

Java架构师必看

发布于 2021-03-22 11:23:14

5.2K00

代码可运行

文章被收录于专栏：Java架构师必看Java架构师必看

运行总次数：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)

                       }
		}]

本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表 Java架构师必看对观点赞同或支持。如需转载，请注明文章来源。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

数据库