需求
完整的extjs自定义实例(没有异步加载数据)
效果图
代码:
Ext.define('dxgx.applyApprovalGrid', {
extend : 'Ext.grid.Panel',
requires : [''],//多继承,一般继承数据模型
columnLines: true,//列的间隔线
multiSelect: true,
selModel: new Ext.selection.CheckboxModel(),//多选的checkbox
constructor: function() {
var me = this;
me.addEvents({
});
me.callParent(arguments);
},
initComponent : function() {
var me = this;
//没有用到model,直接声明store
var gridStore = Ext.create("Ext.data.Store", {
fields: ["pipeType", "state","qsdw", "jsrq", "cz", "gj", "ms"],
data: [
{
pipeType: "男",
state:"审批",
qsdw: "男",
jsrq: "1996/10/27",
cz: "男",
gj: "男",
ms: "男"
},
]
});
//异步加载
// me.store = Ext.create('Ext.data.Store', {
// model : 'fxzl.ReportMaterialInfoModel',
// autoLoad : false,
// proxy : {
// type : 'ajax',
// url : me.contextPath + 'seeperDispMaterialDtl/getDataByCondition',
// reader : {
// type : 'json',
// root : 'data'
// }
// },
// listeners : {
// 'beforeload': function(action, options) {
// me.queryDataParam['json'] = Ext.JSON.encode(me.jsonDataParam);
// var params = me.queryDataParam;
// options.params = new Object();
// Ext.apply(options.params, params);
// },
// 'load':function(store, records, successful, eOpts) {
// }
// }
// });
//定义grid中的列
me.gridColumns= [
{
text:"编号",
xtype: 'rownumberer',//显示编号
fieldLabel: '编号',
align:"center",
width: 40
},
{
text: '状态',
xtype: 'gridcolumn',//默认的列type
align:"center",
width: 150,
dataIndex: 'operate',
// align: 'center',
renderer: function (value, metaData, record) {//往单元格中添加内容
var id = metaData.record.id;
metaData.tdAttr = 'data-qtip="提示文本"';
return Ext.String.format('<div style="width: 30px;height:
20px;background: #dd2c00;margin:auto;text-align: center;line-
height: 20px;color: #ffffff;">111</div>', id);
}
},
{
text : '操作',
xtype: 'gridcolumn',
dataIndex : 'state',
align:"center",
width : 150,
renderer: function (value, metaData, record) {
return "<a href='javascript:void(0);' onclick='approveHandle();'
style='color: dodgerblue;'>" + value + "</a>";
}
},
{
text : '管线类型',
dataIndex : 'pipeType',
align:"center",
width : 150
},
{
text : '权属单位',
dataIndex : 'qsdw',
align:"center",
width : 150
},
{
text : '建设日期',
dataIndex : 'jsrq',
align:"center",
width : 150
},
{
text : '材质',
dataIndex : 'cz',
align:"center",
width : 150
},
{
text : '管径',
dataIndex : 'gj',
align:"center",
width : 150
},
{
text : '埋深',
dataIndex : 'ms',
align:"center",
width : 150
},
{
text : '埋深',
dataIndex : 'ms',
align:"center",
width : 150
},
{
text: '操作2',
xtype: 'actioncolumn',//action通过图片添加触发时间
align:"center",
width: 100,
items: [
{
tooltip: '更改',
icon: "images/edit.png",
handler: function(grid, rowIndex, colIndex) {
alert(1);
}
}
]
},
{
text: '操作2',
xtype: 'actioncolumn',
align:"center",
width: 100,
items: [
{
tooltip: '更改',
icon: "images/edit.png",
handler: function(grid, rowIndex, colIndex) {
alert(1);
}
}
]
}
];
approveHandle=function () {
alert(1);
};
var tbarSpan = Ext.create("Ext.panel.Panel",{
border:0,
html:" <div class='tBarWrap'>" +
"<span class='tBarSpan'>状态:</span>" +
"<span class='tBarSpan'>全部</span> " +
"<div class='stateDIv' style='background:#88CCEA;'></div>" +
"<span class='tBarSpan'>待审批</span>" +
"<div class='stateDIv' style='background:#FF66FF;'></div>" +
"<span class='tBarSpan'>未通过</span>" +
"<div class='stateDIv' style='background:#66FF33;'></div>" +
"<span class='tBarSpan'>已同意</span>" +
"<div class='stateDIv' style='background:#FF0000;'></div>" +
"<span class='tBarSpan'>快到期</span>" +
"<div class='stateDIv' style='background:#999999;'></div>" +
" <span class='tBarSpan'>已过期</span>" +
"</div>"
});
var search = Ext.create("Ext.panel.Panel",{
id:"applyItemSearch",
border:0,
html:"<div class='applyItemSearch'></div>"
});
//实现combox下拉框
var genderStore = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
data: [
{ Name: "供水管线", Value: "gs" },
{ Name: "排水管线", Value: "ps" },
{ Name: "热力管线", Value: "rl" },
{ Name: "通信管线", Value: "tx" },
{ Name: "工业管线", Value: "gy" },
{ Name: "燃气管线", Value: "rq" }
]
});
Ext.apply(this, {
store : gridStore,
columns : me.gridColumns,
//上边框
tbar: [
tbarSpan,
{
xtype: "combobox",
width:170,
name: "Gender",
labelWidth: 65,
fieldLabel: "管线类型",
store: genderStore,
editable: false,
style:"margin-left:400px;",
displayField: "Name",
valueField: "Value",
emptyText: "--查询条件--",
queryMode: "local"
},
{
xtype: "button",
id:"applyApproveSearch",
width:30,
height:25,
padding:0,
cls: 'icon-custom-add',//依靠class引入
handler: function() {
alert(1);
}
},
{
xtype: "button",
id:"applyApproveDownload",
width:30,
height:25,
padding:0,
cls: 'icon-custom-download',//依靠class引入
handler: function() {
alert(1);
}
}
],
//下边框
bbar: Ext.create('Ext.PagingToolbar', {
store: gridStore,
displayInfo: true
})
});
me.callParent(arguments);
}
});