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里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...
随机推荐
- iOS 混合网页开发 问题
在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...
- iOS 任意类型数据转换字符串
//转换数据类型: NSError *parseError = nil; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:resp ...
- HDU 2685 I won't tell you this is about number theory
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2685 题意:求gcd(a^m - 1, a^n - 1) mod k 思路:gcd(a^m - 1, ...
- C++引用和函数返回值
这是老师上课讲的内容,现在把它写下来,一方面当做复习,另一方面真的想学点东西.废话不多说,先贴上测试的代码: #include <iostream.h> float temp; float ...
- MyIsam与InnoDB主要区别
MyIsam与InnoDB主要有以下4点大的区别,缓存机制,事物支持,锁定实现,数据物理存储方式(包括索引和数据). 1.缓存机制 myisam 仅仅缓存索引,不会缓存实际数据信息,他会将这一工作交给 ...
- OSC本地库推送到远程库
1.新建远程库: 例如:http://git.oschina.net/intval/learngit 2.本地生成ssh密钥 ssh-keygen -t rsa -C "intval@163 ...
- [LeetCode]题解（python）：153-Find Minimum in Rotated Sorted Array
题目来源: https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/ 题意分析: 在一个不重复的翻转的数组里面找到最小那个 ...
- log实例
配置详解见2014.10月篇 log4j的pom.xml <dependency> <groupId>log4j</groupId> <artifactId& ...
- Windows的历史zt
原文地址:http://windows.microsoft.com/zh-CN/windows/history#T1=era0 1975–1981:Microsoft 起步 Microsoft 联合创 ...
- WPF中的触发器简单总结
原文 http://blog.sina.com.cn/s/blog_5f2ed5cb0100p3ab.html 触发器,从某种意义上来说它也是一种Style,因为它包含有一个Setter集合,并根据一 ...