ExtJS 自定义组件
主要参考的是官方文档
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>主播推荐-分数管理-标签管理</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/KitchenSink-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
</head> <body>
<div id="grid" style="width: 1000px;"></div>
<div id="ksgrid"></div>
<div id="onegrid"></div>
<div id="twogrid"></div>
<script>
Ext.onReady(function() {
var columns = [{
header: 'ID',
dataIndex: 'id',
sortable: true
}, {
header: '创建时间',
dataIndex: 'create',
width: 120
}, {
xtype: 'datecolumn',
header: '修改时间',
dataIndex: 'update',
width: 150
}, {
header: '标签名称',
dataIndex: 'title'
}, {
header: '推荐排序',
dataIndex: 'recommend'
}, {
header: '流量权重',
dataIndex: 'weigh'
}, {
header: '启用状态',
dataIndex: 'state'
}, {
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 150,
items: [{
iconCls: 'sell-col',
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert('Sell', 'Sell ' + rec.get('id'));
var recNext = grid.getStore().getAt(rowIndex + 1);
}
}, {
getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'alert-col';
} else {
return 'buy-col';
}
},
getTip: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'Hold stock';
} else {
return 'Buy stock';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex),
action = (rec.get('change') < 0 ? 'Hold' : 'Buy'); Ext.Msg.alert(action, action + ' ' + rec.get('company'));
}
}]
}]; var data = [
['1', '2014-12-11 00:30', '2014-12-11 00:30', '女神', '2', '25', '已启用'],
['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用']
]; var store = new Ext.data.ArrayStore({
data: data,
fields: [{
name: 'id'
}, {
name: 'create'
}, {
name: 'update'
}, {
name: 'title'
}, {
name: 'recommend'
}, {
name: 'weigh'
}, {
name: 'state'
}]
});
store.load(); var grid = new Ext.grid.GridPanel({
autoHeight: true,
title: 'title',
renderTo: 'grid',
store: store,
columns: columns
}); //自定义组件
//这是ExtJS中KitchenSink的例子
//这里把columns写入组件中了
Ext.define('KitchenSink.view.grid.ArrayGrid', {
extend: 'Ext.grid.Panel', //Ext.grid.GridPanel也可以
requires: [
'Ext.grid.column.Action' //不太明白用途 字面上看应该是action列的依赖 但是去掉也可以
],
xtype: 'array-grid', //定义了组件的xtype 在form那一章节里面有用到
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'stateGrid',
// height: 350,
title: 'Array Grid',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}, initComponent: function() {
this.width = 650;
this.columns = [{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'company'
}, {
text: 'Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 80,
sortable: true,
renderer: function(val) {
if (val > 0) {
return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text: '% Change',
width: 100,
sortable: true,
renderer: function(val) {
if (val > 0) {
return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
}
return val;
},
dataIndex: 'pctChange'
}, {
xtype: 'datecolumn',
text: 'Last Updated',
width: 115,
sortable: true,
format: 'm/d/Y',
dataIndex: 'lastChange'
}, {
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
iconCls: 'sell-col',
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'alert-col';
} else {
return 'buy-col';
}
},
getTip: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'Hold stock';
} else {
return 'Buy stock';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex),
action = (rec.get('change') < 0 ? 'Hold' : 'Buy'); Ext.Msg.alert(action, action + ' ' + rec.get('company'));
}
}]
}]; this.callParent();
}
}); var ksData = [
['3m Co', '71.72', '0.02', '0.03%', '09/01/2015'],
['Alcoa Inc', '29.01', '0.42', '1.47%', '09/01/2015'],
['Altria Group Inc', '83.81', '0.28', '0.34%', '09/01/2015'],
['American Express Company', '52.55', '0.01', '0.02%', '09/01/2015'],
['American International Group, Inc.', '64.13', '0.31', '0.49%', '09/01/2015']
];
var ksStore = new Ext.data.ArrayStore({
data: ksData,
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange',
}, {
name: 'lastChange'
}]
});
var ksGrid = new KitchenSink.view.grid.ArrayGrid({
autoHeight: true,
title: 'title',
renderTo: 'ksgrid',
store: ksStore
});
//-------------------------------------------------------------------------
//自定义组件2
var ksColumns = [{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'company'
}, {
text: 'Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 80,
sortable: true,
renderer: function(val) {
if (val > 0) {
return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text: '% Change',
width: 100,
sortable: true,
renderer: function(val) {
if (val > 0) {
return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
}
return val;
},
dataIndex: 'pctChange'
}, {
xtype: 'datecolumn',
text: 'Last Updated',
width: 115,
sortable: true,
format: 'm/d/Y',
dataIndex: 'lastChange'
}, {
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
iconCls: 'sell-col',
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'alert-col';
} else {
return 'buy-col';
}
},
getTip: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'Hold stock';
} else {
return 'Buy stock';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex),
action = (rec.get('change') < 0 ? 'Hold' : 'Buy'); Ext.Msg.alert(action, action + ' ' + rec.get('company'));
}
}]
}];
Ext.define('Ext.raku.OneGrid', {
extend: 'Ext.grid.GridPanel', //Ext.grid.Panel也OK
autoHeight: true,
initComponent: function() {
this.store = new Ext.data.ArrayStore({
data: this.data,
fields: this.fields
});
console.log(this.columns);
this.callParent();
}
}); var aOneGrid = new Ext.raku.OneGrid({
data: ksData,
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange',
}, {
name: 'lastChange'
}],
columns: ksColumns,
renderTo: 'onegrid'
});
//另一种继承的方式
//PS 继承自 Ext.grid.GridPanel 和 Ext.grid.Panel 都可以
Ext.raku.TwoGrid = Ext.extend(Ext.grid.Panel, {
autoHeight: true,
initComponent: function() {
this.store = new Ext.data.ArrayStore({
data: this.data,
fields: this.fields
});
console.log(this.columns);
this.callParent();
}
}); var aTwoGrid = new Ext.raku.TwoGrid({
data: ksData,
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange',
}, {
name: 'lastChange'
}],
columns: ksColumns,
renderTo: 'twogrid'
}); }); </script>
</body> </html>
ExtJS 自定义组件的更多相关文章
- 【ExtJS】自定义组件datetimefield(二)
接上[ExtJS]自定义组件datetimefield(一) 第三步:添加按钮事件绑定,获取选定的时间 privates:{ finishRenderChildren: function () { v ...
- 【ExtJS】自定义组件datetimefield(一)
目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefiel ...
- 【ExtJS】关于自定义组件(一)
一.目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefi ...
- ExtJS关于组件Component生命周期
extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...
- ExtJs 自定义Vtype验证
最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证.自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证.对于单字段的验证主要通过regex配置项指定自定义 ...
- ExtJS 4 组件详解
ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component)",所有组件都是Ext.Component的子类,Ext.Component提供了生 ...
- ExtJS4.2 - 从 Hello World 到 自定义组件 -01 （为爱女伊兰奋斗）
ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验.概述.项目搭建.国际化.HelloWorld.布局 —— 为爱女伊兰而奋斗 ——少走弯路,简单才是王道 1. 写在前面 ...
- Javascript - ExtJs - GridPanel组件
GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...
- ExtJS自定义事件
1.开发ExtJS组件UI的时候,基本上对于一些操作,就是与后台交互之类的多数都是用户进行点击触发一个事件,在事件的处理器handler里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...
随机推荐
- 经典：十步完全理解 SQL
经典:十步完全理解 SQL 来源:伯乐在线 链接:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完 ...
- python 文件夹比较
参考:http://blog.csdn.net/imzoer/article/details/8675078 文件比较:filecmp模块:filecmp '''Created on 2014-6-6 ...
- Linux下为何都是文件的理解
所谓“文件”,就是在我们的电脑中,以实现某种功能.或某个软件的部分功能为目的而定义的一个单位. Linux都是以文件的形式存在,当我们访问某个文件(Linux中的文件有目录,连接,普通文本),由于Li ...
- javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- PHP利用递归法获取多级类别的树状数组
数据结构:category(id, pid, name),对应:信息ID,父项ID,类别名 测试数据: $aryCate = array( array('id' => 1, 'pid' => ...
- hdu 5730 Shell Necklace fft+cdq分治
题目链接 dp[n] = sigma(a[i]*dp[n-i]), 给出a1.....an, 求dp[n]. n为1e5. 这个式子的形式显然是一个卷积, 所以可以用fft来优化一下, 但是这样也是会 ...
- 0x800a138f - JavaScript runtime error: Unable to get property 'asSorting' of undefined or null reference 错误原因以及解决办法
使用Jquery Datatables的时候也许会碰到这样的错误提示,当我们仔细的查找代码,发现引用的js文件,css文件均引用了,就是找不到他的问题所在. 这是从我们引用的js文件内部报的错. 这个 ...
- INFOQ几篇论文
http://www.infoq.com/cn/articles/java-profiling-with-open-source http://www.infoq.com/cn/articles/Vi ...
- Windows Azure 网站：应用程序字符串和连接字符串的工作原理
编辑人员注释:本文章由 Windows Azure 网站团队的首席项目经理 Stefan Schackow 撰写. Windows Azure 网站上有一个方便的功能,即开发人员可将 Azure 中的 ...
- 浅谈Web Api配合SignalR的跨域支持
最近接手的一个项目中,涉及到一个简单的消息模块,由于之前有简单了解过SignalR,所以打算尝试着摸索摸索~! 首先,通过Nuget管理器添加Microsoft ASP.NET SignalR引用~目 ...