Javascript - ExtJs - GridPanel组件

GridPanel组件（Ext.grid.GridPanel）^{logogram：Ext.grid.Panel | xtype:gridpanel}

此类派生自Ext.Panel，创建表格需要两个必须的对象，columns和Ext.data.Store。columns用于指示GridPanel表格的列的基本信息，表格显示在页面上，其列的信息需要通过columns配置，Ext.data.Store是GridPanel的数据来源。

配置columns : Json

columns数组里可配置Json，每个Json表示一列。在Json里配置列信息。

var columns = [
{ xtype: "rownumberer" },//第一列显示行号。同时此行号也是作为该条记录在Store中的索引，可通过store的removeAt(rowIndex)删除此记录
{ header: "编号", dataIndex: "ID" }, //第二列的列头和该列在store中对应的列名
    //……
]

配置.config

width : number | "%"
//指示当前列宽度，默认100px
 
sortable : bool
//指示当前列是否可以排序，默认true。禁用后排序菜单会显示为不可用
 
menuDisabled : bool
//指示是否禁止当前列的表头菜单。禁用后表头不再显示菜单。禁用menuDisabled 并不会阻止排序按钮的显示，除非同时设置menuDisabled和sortable
 
xtype : 子组件类型名称（小写）
//为表格添加某些组件
 
editor : { }
//如果表格带有列编辑器时，指示列显示的是哪种表单子组件，并对验证做出指示
 
renderer：fn(columnValue,cellMeda,record)
//fn函数用于临时渲染一些自定义的列效果。
//fn的参数
//columnValue：列数据。
//cellMeda：单元格td（可获取id和css）
//record：当前列所在行的行数据对象，每个td的数据通过当前record[columnID]或record.get("列名")的形式获取
//该函数必须返回一个值，这个值会自动替换当前列的数据，如果不返回值就会无效
//示例：
var columns = [
    { header: "编号", dataIndex: "ID",sortable:false },//列1
    { header: "姓名", dataIndex: "Name" },//列2
    { header: "出生日期", dataIndex: "BothDate" },//列3
    { header: "性别", dataIndex: "Gender", renderer: function (columnValue, metadata) { columnValue = '<font color="red">' + columnValue + '</font>'; return columnValue; } },//列4
    { header: "自我介绍", dataIndex: "SelfIntroduction" }//列5
];
//替换后的效果如下图

配置Ext.data.Store

GridPanel的数据来源可以是本地，也可以是远程数据。参看：Ext.data.Store加载数据

读取XML文件

<?xml version="1.0" encoding="utf-8" ?>
<data>
          <employee>
                    <ID>1</ID>
                    <employeeName>sam</employeeName>
                    <age>32</age>
                    <gender>0</gender>
                    <IsMarried>true</IsMarried>
          </employee>
          <employee>
                    <ID>2</ID>
                    <employeeName>korn</employeeName>
                    <age>22</age>
                    <gender>1</gender>
                    <IsMarried>false</IsMarried>
          </employee>
          <employee>
                    <ID>3</ID>
                    <employeeName>leo</employeeName>
                    <age>32</age>
                    <gender>0</gender>
                    <IsMarried>false</IsMarried>
          </employee>
          <employee>
                    <ID>4</ID>
                    <employeeName>neil</employeeName>
                    <age>58</age>
                    <gender>1</gender>
                    <IsMarried>false</IsMarried>
          </employee>
</data>

Ext.onReady(function () {

//数据模型
    Ext.define("EmployeeModel", {
        extend: "Ext.data.Model",
        fields: [
            { name: "ID", type: "int" },
            { name: "employeeName", type: "string" },
            { name: "age", type: "int", convert: null },
            { name: "gender", type: "int" },
            { name: "IsMarried", type: "boolean", defaultValue: true, convert: null }
        ]
    });

//存储器
    Ext.create("Ext.data.Store", {
        storeId: "EmployeeStore",
        model: "EmployeeModel",
        autoLoad: true,
        proxy: {
            type: "ajax",
            url: "Data.xml",
            reader: {
                type: "xml",
                root: "data", //根节点
                record: "employee" //作为记录的节点
            }
        }
    });

//表格
    Ext.create("Ext.grid.Panel", {
        renderTo: Ext.get("box"),
        title: "员工信息",
        width: 500,
        store: "EmployeeStore",
        columns: [
            { header: "员工编号", dataIndex: "ID" },
            { header: "员工姓名", dataIndex: "employeeName" },
            { header: "员工年龄", dataIndex: "age" },
            { header: "员工性别", dataIndex: "gender" },
            { header: "员工婚否", dataIndex: "IsMarried" }
        ]
    });
});

表格选择模式

当用户使用鼠标单击表格时，他可能希望单击一行时选中该行，或单击某个单元格时只选中单元格。这个效果可以通过配置gridPanel的selModel来完成。

selModel指向一个Ext.selection.Model的实例，这是一个抽象的类，不能直接new，它表示选择模式，派生自这个类的有三个重要的代表选择模式的类，分别是：Ext.selection.RowModel、Ext.selection.CellModel、Ext.selection.CheckboxModel，分别表示行选择模式、列选择模式、复选框选择模式。这是一个重要的类型，如果你想要获得选中的行或选中的单元格的数据，这就需要首先获得Ext.selection.Model，以便调用它提供的一系列的方法去获得数据。

selModel的属性
selType："cellmodel"（单击选择单元格）| "rowmodel"（单击选择整行）| "checkboxmodel"（显示复选框）
//选择的模式
mode："SINGLE"（单选） | "SIMPLE"（多选）| "MULTI"（按住Ctrl多选）
//在选择模式上进一步设置，注：单元格模式无法多选
checkOnly
//是否必须手动勾选复选框才选中行，因为在复选框模式下，鼠标选中行就可以自动勾选复选框
ignoreRightMouseSelection
//是否右键点击时，只能选中一次
injectCheckbox ：'first' | 'last' | cellIndexNumber
//列头的复选框显示在哪个列索引处

示例：

Ext.create("Ext.grid.Panel", {
    selModel: {
        selType: 'rowmodel',    //单击选中行
        mode: "MULTI" //按Ctrl键单击多选
    },
});

Ext.selection.Model

getCount()
//获取被选中的行或单元格的总数
var selModel = Ext.getCmp("gridpanel").getSelectionModel();//getCmp方法根据组件ID获取组件对象
alert(selModel.getCount());
 
getSelection()
//获取被选中行的行集合对象。返回一个 Ext.data.Model[ ]数组。
//示例：给grid绑定selectionchange事件
selectionchange: function (selectionModel, selectedRow) {                    
    if (selectionModel.getSelection().length != 0) {
        //有记录被选中时的操作……
    }
}
 
selected
//获取被选中行的行集合对象。此属性等同于 getSelection()方法。selected属性或getSelection()方法都返回一个 Ext.data.Model[ ]数组。
//示例：
var selModel = Ext.getCmp("gridpanel").getSelectionModel();//获得选择模式
selRows = selModel.selected;//获得被选中的行集合
selRows.each(function (e) {
    alert(e.get("Name"));//获取当前行的Name列的数据
});
 
isSelected(dataModel)
//当前记录是否被选中。
 
select(dataModel,bool,bool)
//选中参数指定的记录，参数2和3可选，参数2为真时记住存在的选项，如果复选框所在的容器注册了选择事件，参数3为真时将略过该事件，不去触发它。
 
deselect(dataModel,bool)
//取消选中参数指定的纪录，参数2可选，如果复选框所在的容器注册了取消选择事件，参数2为真时将略过该事件，不去触发它。
 
selectAll()
//选中所有记录
 
deselectAll()
//取消选中所有记录
 
//完整例子：
<input id="getValueBtn" type="button" value="getRow" />
//以下代码省略gridPanel的创建，只给出获取在复选框模式下通过点击按钮得到被选中行的数据
Ext.get("getValueBtn").on("click", function () {
    var rowMsg = "";
    var Rows = gridPanel.getSelectionModel().selected;
    if (Rows.getCount() == 0) {
        Ext.MessageBox.alert("", "未选中任何行");
        return;
    }
    Rows.each(function (rowItem) {
        rowMsg += "</br>选中行的信息：" + rowItem.get("ID") + "," + rowItem.get("Name") + "," + rowItem.get("Gender") + "</br>";        
    });
    Ext.MessageBox.alert("", rowMsg);
});
 
//删除记录：
Ext.get("btn").on("click", function () {
    Ext.MessageBox.confirm("提示", "确认删除?", function (e) {
        if (e == "yes") {
            var selModel = Ext.getCmp("gridpanel").getSelectionModel();//获得选择模式
            selRows = selModel.selected;//获得被选中的行集合
            selRows.each(function (e) {
                dataStore.remove(e)//从数据源里移除数据
            });
        }
    });
});
 
//插入新行：
Ext.get("btn").on("click", function () {
    //创建新行并赋默认值
    var newRow = { ID: 0, Name: "输入姓名", BothDate: "输入生日", Gender: "输入性别", SelfIntroduction: "输入自我介绍" };
    //在索引0的位置插入新行
    dataStore.insert(0,newRow);
});

GridPanel

配置.config

store：stringID
//数据来源是哪个数据存储器
 
forceFit : true
//指示表格是否正好容纳所有列数据，列自适应宽。
 
scrollOffset: 0
//不为表格最右边可能显示的滚动条留任何区域
 
enableColumnMove : true
//指示列名是否可前后拖动 。
 
enableColumnResize : true
//指示列名是否可前后拉动更改列宽度 。
 
loadMask : false
//指示数据加载完成之前显示遮罩动画 。
 
selModel : Ext.selection.Model
//指示表格选择模式。
 
tbar : Ext.toolbar.ToolbarView（xtype: toolbar）
//在表格顶部增工具栏组件。
 
bbar : Ext.toolbar.ToolbarView（xtype: toolbar）
//在表格底部增加工具栏。
//如：
bbar:new Ext.PagingToolbar(),//显示一个分页工具栏。
//分页工具栏示例：
var bottomTool = new Ext.PagingToolbar({
    store: dataStore,
    displayInfo: true,//是否显示分页的额外信息
    displayMsg: "显示第{0}条-{1}条记录，一共{2}条",//displayInfo为true时，此属性才能生效
    emptyMsg: "无记录"
});
 
plugins : [ ]
//指示gridPanel所使用的插件。
 
enableDragDrop : bool
//是否可拖放表格记录。需要同时配置viewConfig。
 
viewConfig : { } 
//表格的视图配置。 
//示例：
//以下创建了两张表格，通过配置拖放，实现了两张表数据可跨表拖放。而且表自身内部的记录在其容器中也可以随意拖放。注意必须使用不同的数据源，否则跨表拖放无效。
new Ext.grid.GridPanel({
    renderTo: "box",
    width: 502,
    forcefit:true,
    store: dataStore,
    columns: columns,
    enableDragDrop:true,
    viewConfig: {
        plugins: {
            ptype:"gridviewdragdrop"
        }
    }
});
 
new Ext.grid.GridPanel({
    renderTo: "box2",
    width: 502,
    forcefit: true,
    store: dataStore2,
    columns: columns,
    enableDragDrop: true,
    viewConfig: {
        plugins: {
            ptype: "gridviewdragdrop"
        }
    }
});
 
features : [ { } , { } ]
//指示表格的各种特性。比如表头菜单出现分组功能。API可查：Ext.grid.feature.GroupingView 或 ftype: grouping。 
//示例：
//ftype: grouping是类似xtype:"控件名"的简写形式，全名：Ext.grid.feature.GroupingView
new Ext.grid.GridPanel({
    features: [{ ftype: "grouping", groupByText:"按此列分组"}]
});

方法.method

view.refresh()
//刷新表格视图

update(string)
//刷新组件的内部区域，将string填入面板。

getSelectionModel()
//获取表格选择模式，返回一个派生于抽象类Ext.selection.Model类型的选择模式对象。
//该对象可能是Ext.selection.RowModel、Ext.selection.CellModel、Ext.selection.CheckboxModel，这得根据你创建gridPpanel时所指定的选择模式而定。 
//Ext.selection.Model实例提供isSelected(data.Model)方法，测试参数指定的记录是否处于选中状态，如：gridPanel.getSelectionModel().isSelected(record)

事件.event

itemcontextmenu：fn(view，record，item，index，e )
//右键事件，当用户在gridPanel里使用右键时触发。
 
selectionchange: function (selectionModel, selectedRow)
//选择发生变化时触发 
//示例：
//右键点击grid时创建右键菜单
Ext.create("Ext.grid.Panel", {
    //……
    listeners: {
        itemcontextmenu: function (view,record,item,index,e) {
            e.preventDefault();
            Ext.create("Ext.menu.Menu", {
                id: "contextmenu",
                items: [
                    {
                        text: "全选",
                        handler: function () {
                        }
                    },
                    {
                        text: "反选",
                        hanlder: function () {
                        }
                    }
                ],
                listeners: {
                    deactivate: function (menuSelf) {
                        menuSelf.destroy(); //消失后销毁自身
                    }
                }
            });
            Ext.getCmp("contextmenu").showAt(e.getXY()); //显示在鼠标右键点击处
        }
    }
});

例子：在复选框模式下，右键菜单实现全选、反选、取消选择 

/*
构造适用于gridPanel、TreePanel的全选反选取消的右键菜单
hostComponent：右键菜单的宿主（一个gridPanel或TreePanel）
如果IsComplete为true，则返回一个实现全选反选取消的完整菜单
否则只返回一个实现全选反选取消的菜单子项，在函数外部可调用Ext.menu.Menu的add方法将子项添加到右键菜单中
*/
function createSelectContextMenu(hostComponent, event, IsComplete) {
 
    event.preventDefault();
    var selModel = hostComponent.getSelectionModel();
    var records = hostComponent.getStore().getRange();
    //创建菜单子项
    var items = [
            {
                text: "全选",
                handler: function () {
                    selModel.selectAll();
                }
            },
            {
                text: "反选",
                handler: function () {
                    records.forEach(function (r) {
                        var isSelected = selModel.isSelected(r);
                        if (isSelected) {
                            selModel.deselect(r);
                        }
                        else {
                            selModel.select(r, true);
                        }
                    });
                }
            },
            {
                text: "全部取消",
                handler: function () {
                    selModel.deselectAll();
                }
            }
    ];
        
       
    //创建完整菜单
    var contextmenu = Ext.create("Ext.menu.Menu", {
        items:items,              
        listeners: {
            deactivate: function (menuSelf) {
                menuSelf.destroy(); //消失后销毁自身
            }
        }
    });
 
    return IsComplete?contextmenu:items;
 
}
 
 
/*-----测试：获取子项-----*/
itemcontextmenu: function (view, record, item, index, e) {
    var menu=Ext.create("Ext.menu.Menu", {                       
        items: [
            { text : "其它功能" }
        ],
        listeners: {
            deactivate: function (menuSelf) {
                menuSelf.destroy(); //消失后销毁自身
            }
        }
    });
    menu.add(createSelectContextMenu(this,e));
    menu.showAt(e.getXY());
}
 
/*-----测试：获取全部-----*/
itemcontextmenu: function (view, record, item, index, e) {        
    var menu=createSelectContextMenu(this,e,true);
    menu.showAt(e.getXY());
}

例子：鼠标划过列显示列信息

//鼠标划过列显示列信息
gridPanel.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
    if (view.tip == null) {
        view.tip = Ext.create('Ext.tip.ToolTip', {
            target: view.el,
            delegate: view.itemSelector,
            renderTo: Ext.getBody(),
            width: 200
        });
    };
    var gridColums = view.getGridColumns();
    var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
    view.el.clean();
    view.tip.update(record.data[column.dataIndex]);
});

其它参考

Javascript - ExtJs - 组件 - 分页

Javascript - ExtJs - GridPanel组件 - 编辑

Javascript - 学习总目录