EXT表格

最新推荐文章于 2016-01-16 17:30:48 发布
最新推荐文章于 2016-01-16 17:30:48 发布
阅读量7.4k 收藏 4
点赞数 1
分类专栏： EXTjs 文章标签： ext header stylesheet function div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/21aspnet/article/details/6859149
版权

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

建议先看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)

                       }
		}]


 

 

深度Java
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Ext JS]3.6 Ext JS 表格(Grid)概览
oscar999的专栏
04-18 429
Grid, 翻译过来是网格， 也就是表格。
Ext JS数据分组表格(Group feature Grid)的数据排序
最新发布
oscar999的专栏
04-02 283
本篇承接下面两篇对数据分组表格的数据排序进行介绍。
ext可编辑表格
10-09
ext可编辑表格Ext.onReady(function() { Ext.QuickTips.init(); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //构造一个只能包含checkbox的列 var checkColumn = new Ext.grid.CheckColumn({ header: 'Indoor?', dataIndex: 'indoor', width: 55 }); // 构造ColumnModel var cm = new Ext.grid.ColumnModel({ columns: [{ id: 'common', header: 'Common Name', dataIndex: 'common', width: 220, // 使用上边定义好的别名 editor: new fm.TextField({ allowBlank: false }) }, { header: 'Light', dataIndex: 'light', width: 130, editor: new fm.ComboBox({ typeAhead: true, triggerAction: 'all', transform: 'light', lazyRender: true, listClass: 'x-combo-list-small' }) }, { header: 'Price', dataIndex: 'price', width: 70, align: 'right', renderer: 'usMoney', editor: new fm.NumberField({ allowBlank: false, allowNegative: false, maxValue: 100000 }) }, { header: 'Available', dataIndex: 'availDate', width: 95,
Ext表格-基本表格和表格增删修
zhangfeng20012的专栏
10-02 428
  研究Ext有一段时间了，对Ext表格的学习心得写出来和大家一起分享。  1.表格的建立      建立表格基本上分3步骤：      (1)数据获取      (2)定义表头，即就是定义表格的列名，宽度，是否可以排序等      (3)绑定数据和表头      表格的一些其他特征也是在这些步骤当中实现的，我们以一个列子来说明表格的建立哈   var com_id;  var com_table...
ext动态表头，及表头的分组
yangxi_info的博客
04-13 431
   一，自定义的表头，默认表头使用 var groupTmp = [{header: '', colspan: 4, align: 'center' },{        header : '加班日期及加班时长（单位：小时）',        menuDisabled:true,        colspan :30,        align : 'center'    },{head...
Ext表格控件
02-25
很好很全，易懂易学！关于extjs表格控件的使用，适用于初学者，有需要的可以下。
Ext表格（Grid）上面的悬浮提示
03-23
NULL 博文链接：https://laodaobazi.iteye.com/blog/1064607
Ext表格获取后台数据
04-05
ExtJS是一款基于JavaScript的RIA（Rich Internet Application，富互联网应用）框架，它提供了许多强大的功能和组件，其中之一就是表格组件Ext.grid.GridPanel。 Ext.grid.GridPanel是一个功能强大的表格控件，它...
Ext表格代玛
06-27
Ext表格代玛
ext表格布局小例子
08-13
extjs表格布局小例子，涉及到数据的存储，如何删除数据和添加数据
Ext3.4.0复杂(多行)表头+锁定多列例子
09-09
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒，项目中需要使用到的。
Ext table布局实例 formpanel的table布局
03-15
Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度
一个extjs表格的实例
06-17
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性；2、一个简单的页面布局。供参考。
Jquery仿Ext表格flexigrid
08-29
**jQuery仿Ext表格Flexigrid详解** Flexigrid是一款基于jQuery的开源表格插件，它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性，深受Web开发者喜爱，尤其适用于需要展示大量...
Ext表格列锁定+多表头插件
06-29
在本文中，我们将深入探讨"Ext表格列锁定+多表头插件"这一主题，它在Ext3.4版本中的实现及其相关技术。这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效...
ExtJS的使用方法汇总(1)——配置和表格控件使用
热门推荐
薛敬明的专栏
09-09 3万+
ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了,ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或者
采用新的方法解决extjs4.1 grid合并单元格问题
江下飞雪
08-04 2万+
首先技术原理基于狂人论坛的大大yunfengcheng发的帖子《100行代码解决ExtJs4.1合并单元格问题》，表示感谢。 如果需要他的代码各位可自行下载，在此不方便贴出（人家可卖30个金钱的呢，虽然有点小贵，呵呵）。 好了，进入正题吧。首先使用他的代码后效果如下： 从这幅图可以看出，该合并的都合并了，不该合并的也合并了，第三列“A单元”，属于不同的地块，不同栋数，常理是不应该合并的，
extjs中的表格编辑
01-16 1219
要实现ext表格编辑首先需要启用CellEditing插件，示例代码如下： grid = Ext.create('Ext.grid.Panel', { renderTo : 'information_date',// 渲染到一个div上 frame : true,// 面板渲染 forceFit : true,// 自动填充panel空白处 autoHeight:true,
Ext教程表单表格的使用
04-29
Ext教程表单表格的使用主要涉及到Ext组件中的FormPanel和GridPanel的运用。在编写JS文件时，需要遵循一定的格式和规范，包括输入和输出的数据格式。对于表单FormPanel，输入数据一般为json格式，输出则是将json数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值