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里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...
随机推荐
- OC中对象拷贝概念
OC中的对象拷贝概念,这个对于面向对象语言中都会有这种的问题,只是不同的语言有不同的解决方式:C++中有拷贝构造函数,Java中需要实现Cloneable接口,在clone方法中进行操作.但是不过OC ...
- android笔试题
1.请谈一下Android系统的架构. 答:Android系统采用了分层架构,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层. 2.谈谈android大众常用的五种布 ...
- php中禁止非法调用和硬路径引入文件的方法
php中禁止非法调用和硬路径引入文件的方法 在php中有一些公共的文件为了方便,我们会做一个公共文件,让不用的文件共同调用.为了禁止公共文件被非常单独调用,可以在文件上做一个常量,禁止非常调用:在公共 ...
- fputcsv 和 fgetcsv
public function putcsv(){ $list = M("ad")->limit(0,10)->select(); $fp = fopen('./fil ...
- str系列---字符串函数
1. strcat extern char *strcat(char *dest,char *src); 把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0'. 返回指 ...
- 用“U盘”重新安装（MSDN）原版Windows XP sp3操作系统(图文)
安装微软(MSDN)原版Windows XP sp3系统的方法不少,可以说是很多,但是我就用“U盘”安装.用“U盘”装XP系统也不是什么稀罕事,不会的,就按照下面我常用的“U盘”装原版Windows ...
- python访问cloudstack的api接口
1.CloudStack API 如同 AWS API 一样,CloudStack API 也是基于 Web Service,可以使用任何一种支持 HTTP 调用的语言(例如 Java,python, ...
- codeigniter使用mongodb/redis
ci2.x版本,使用mongodb,需要安装pecl-php-mongo扩展(github上很多扩展已不可用,找到个可用版本纪录于此),添加到php.ini中 使用如下 public function ...
- How many ways（记忆化搜索）
How many ways Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- hdu3280Equal Sum Partitions (区间DP)
Problem Description An equal sum partition of a sequence of numbers is a grouping of the numbers (in ...