Extjs学习笔记(十一) gridpanel

1.表格面板类Ext.grid.Panel 两个别名xtype:(gridpanel, grid)
    重要的配置参数
        columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
            重要的配置参数
                text : String 列的标题 默认是""
                dataIndex : String 和Model的列一一对应的
                sortable : true 可以整理,可以进行分类的
                field: 可编辑字典配置
            重要方法
                getStore
            重要属性
                ownerCt
        title : String 表格的标题
        renderTo : Mixed 把表格渲染到什么地方
        width : Number 宽
        height: Number 高           
        frame : Boolean 是否填充渲染这个Panel
        forceFit : true 设定表格的列是否自动填充
        store : store 数据集合
        tbar: [] 头部工具栏
        dockedItems : Object/Array 表格停靠在上下左右的工具条
        selType : 'checkboxmodel', 选择框的选择模式
        multiSelect :true,//允许多选
        plugins 插件

示例：

 

(function() {
	Ext.require(['*']);
	Ext.onReady(function() {
				Ext.Loader.setConfig({
							enabled : true
						});
				Ext.create('Ext.data.Store', {
							storeId : 'employeeStore',
							fields : ['firstname', 'lastname', 'senority',
									'dep', 'hired'],
							data : [{
										firstname : "Michael",
										lastname : "Scott",
										senority : 7,
										dep : "Manangement",
										hired : "01/10/2004"
									}, {
										firstname : "Dwight",
										lastname : "Schrute",
										senority : 2,
										dep : "Sales",
										hired : "04/01/2004"
									}, {
										firstname : "Jim",
										lastname : "Halpert",
										senority : 3,
										dep : "Sales",
										hired : "02/22/2006"
									}, {
										firstname : "Kevin",
										lastname : "Malone",
										senority : 4,
										dep : "Accounting",
										hired : "06/10/2007"
									}, {
										firstname : "Angela",
										lastname : "Martin",
										senority : 5,
										dep : "Accounting",
										hired : "10/21/2008"
									}]
						});

				Ext.create('Ext.grid.Panel', {
							title : 'Column Demo',
							store : Ext.data.StoreManager
									.lookup('employeeStore'),
							columns : [{
										text : 'First Name',
										dataIndex : 'firstname'
									}, {
										text : 'Last Name',
										dataIndex : 'lastname'
									}, {
										text : 'Hired Month',
										dataIndex : 'hired',
										xtype : 'datecolumn',
										format : 'M'
									}, {
										text : 'Department (Yrs)',
										xtype : 'templatecolumn',
										tpl : '{dep} ({senority})'
									}],
							width : 400,
							selType : 'checkboxmodel',// 设定选择模式
							renderTo : Ext.getBody()
						});
			});
})();