碼上快樂

相關內容    簡體    繁體

表格列Column

本文轉載自   查看原文   2012-04-29 11:24   7123 

　　Ext.grid.column.Column類定義了表格內部與列相關的配置，其中包括列標題及數據展示。

　　Ext.grid.column.Column主要配置項

配置項 類型 說明
align String 設置列標題和數據的對齊方式，默認為left
columns Array 設置組列
dataIndex String 設置列與數據集中數據的對應關系，值為數據模型中的字段名稱
draggable Boolean 列頭是否可以拖動，默認為true
flex Number 列寬所占flex和的比例
groupable Boolean 在使用Ext.grid.feature.Grouping分組特性的情況下是否禁用該列在標題菜單中的分組功能
header String 列標題
hideable Boolean false則阻止用戶隱藏該列，默認為true
menuDisabled Boolean true則禁用標題菜單，默認為false
render Function 自定義渲染函數
sortable Boolean 是否允許進行排序，默認為true,將根據Ext.data.Store.remoteSort判斷進行本地排序還是遠程排序。
text String 列標題，header配置項優先
width Number 列寬

　　Ext.grid.column.Column子類：

  • Ext.grid.column.Boolean   布爾列
  • Ext.grid.column.Number   數字列
  • Ext.grid.column.Date        日期列
  • Ext.grid.column.Action     動作列
  • Ext.grid.column.Template  模板列
  • Ext.grid.RowNumber        行號列
  • Ext.tree.Column              樹結構列

 

　　1、布爾列Ext.grid.column.Boolean配置項

配置項 類型 說明
falseText String 渲染false值對應的文本，默認為false
trueText String 渲染true值對應的文本，默認為true
undefinedText String 渲染空值對應的文本，默認為空字符串

　　2、數字列Ext.grid.column.Number配置項

配置項 類型 說明
format String 設置Ext.util.Format.number函數的格式化字符串，默認為0,000.00

　　3、日期列Ext.grid.column.Date

　　3.1、Ext.grid.column.Date主要配置項

配置項 類型 說明
format String 設置Date.format函數的格式化字符串，默認為Ext.Date.defaultFormat

　　3.2、Ext.grid.column.Date示例

　　代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.grid.column.Column示例</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define("Employee", {
                extend: "Ext.data.Model",
                fields: [
                    { name: "Name" },
                    { name: "Sex" },
                    { name: "InOffice" },
                    { name: "Birthday" },
                    { name: "Age" },
                    { name: "Salary" }
                ]
            });
            var employee = [
                { "Name": "王曉敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                { "Name": "陳佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
            ];
            var store = Ext.create("Ext.data.Store", {
                model: "Employee",
                data: employee,
                autoLoad: true
            });

            Ext.create("Ext.grid.Panel", {
                title: "Ext.grid.column.Column示例",
                frame: true,
                width: 500,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    { header: "姓名", width: 100, dataIndex: "Name" },
                    { header: "性別", width: 60, dataIndex: "Sex" },
                    { header: "在職狀態", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在職", falseText: "離職" },
                    { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年齡", width: 60, dataIndex: "Age" },
                    { header: "薪資", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" }
                ]
            });
        });
    </script>
</head>
<body>
</body>
</html>

　　效果圖：

　　4、動作列Ext.grid.column.Action

　　4.1、Ext.grid.column.Action主要配置項

配置項 類型 說明
altText String 應用於圖片元素上的alt屬性，默認為空字符串
getClass Function 返回圖片樣式函數
handler Function

設置圖標點擊事件的響應函數，該函數將被傳入如下參數：

view：TableView，表格視圖

rowIndex：Number，當前行的索引

colIndex：Number，當前列的索引

item：Object，條目

e：Event，點擊事件對象
icon String 獲取圖標資源的URL地址，默認為Ext.BLANK_IMAGE_URL
iconCls String 圖標樣式
items Array 包含多個圖標定義的數組
scope Object 設置handler和getClass函數的作用域，默認為Column
stopSelection Boolean 默認為true阻止當動作發生時，當前行被選中
tooltip String 設置工具提示消息。需要初始化Ext.tip.QuickTipManager

　　4.2、Ext.grid.column.Action示例

　　代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.grid.column.Column示例</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define("Employee", {
                extend: "Ext.data.Model",
                fields: [
                    { name: "Name" },
                    { name: "Sex" },
                    { name: "InOffice" },
                    { name: "Birthday" },
                    { name: "Age" },
                    { name: "Salary" }
                ]
            });
            var employee = [
                { "Name": "王曉敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                { "Name": "陳佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
            ];
            var store = Ext.create("Ext.data.Store", {
                model: "Employee",
                data: employee,
                autoLoad: true
            });

            Ext.create("Ext.grid.Panel", {
                title: "Ext.grid.column.Column示例",
                frame: true,
                width: 550,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    { header: "姓名", width: 100, dataIndex: "Name" },
                    { header: "性別", width: 60, dataIndex: "Sex" },
                    { header: "在職狀態", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在職", falseText: "離職" },
                    { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年齡", width: 60, dataIndex: "Age" },
                    { header: "薪資", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                    {
                        header: "操作",
                        width:50,
                        xtype: "actioncolumn",
                        items: [{
                            icon: "images/edit.png",
                            handler: function (grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                Ext.MessageBox.alert("編輯" + rec.get("Name"));
                            }
                        }, {
                            icon: "images/delete.png",
                            handler: function (grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                Ext.MessageBox.alert("刪除" + rec.get("Name"));
                            }
                        }]
                    }
                ]
            });
        });
    </script>
</head>
<body>
</body>
</html>

　　效果圖：

　　5、模板列Ext.grid.column.Template

配置項 類型 說明
tpl String/XTemplate 設置一個XTemplate模板對象或模板定義，模板數據將被傳入其中

　　示例：

{
    header:"描述"，
    width:100,
    xtype:"templatecolumn",
    tpl:"{Name}<tpl if="leader==false">不</tpl>是組長"
}

　　6、行號列Ext.grid.RowNumberer

　　6.1、Ext.grid.RowNumberer主要配置項

配置項 類型 說明
text String 顯示在列表標題中的文本或HTML代碼段
width Number 行號列的寬度，默認為23px

　　6.2、Ext.grid.RowNumberer示例

Ext.create("Ext.grid.RowNumberer", { text: "序號", width: 30 })
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.grid.column.Column示例</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define("Employee", {
                extend: "Ext.data.Model",
                fields: [
                    { name: "Name" },
                    { name: "Sex" },
                    { name: "InOffice" },
                    { name: "Birthday" },
                    { name: "Age" },
                    { name: "Salary" }
                ]
            });
            var employee = [
                { "Name": "王曉敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                { "Name": "陳佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
            ];
            var store = Ext.create("Ext.data.Store", {
                model: "Employee",
                data: employee,
                autoLoad: true
            });

            Ext.create("Ext.grid.Panel", {
                title: "Ext.grid.column.Column示例",
                frame: true,
                width: 550,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    Ext.create("Ext.grid.RowNumberer", { text: "序號", width: 30 }),
                    { header: "姓名", width: 100, dataIndex: "Name" },
                    { header: "性別", width: 60, dataIndex: "Sex" },
                    { header: "在職狀態", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在職", falseText: "離職" },
                    { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年齡", width: 60, dataIndex: "Age" },
                    { header: "薪資", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                    {
                        header: "操作",
                        width: 50,
                        xtype: "actioncolumn",
                        items: [{
                            icon: "images/edit.png",
                            handler: function (grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                Ext.MessageBox.alert("編輯" + rec.get("Name"));
                            }
                        }, {
                            icon: "images/delete.png",
                            handler: function (grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                Ext.MessageBox.alert("刪除" + rec.get("Name"));
                            }
                        }]
                    }
                ]
            });
        });
    </script>
</head>
<body>
</body>
</html>

　　效果圖：


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 任意表格(table)實現拖動列(column)改變列大小 jsp表格列的合並 表格列可拖拽寬度 layui隱藏表格列 實現表格固定列 Extjs Ext.grid.column.Column 隱藏顯示列 使用Ext.grid.column.Column定義列 Extjs Ext.grid.column.Column 隱藏顯示列 mysql5.7 生成列 generated column mysql 添加/刪除列(column)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM