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里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...
随机推荐
- Java RMI 学习笔记
概况 功能:提供了客户辅助对象和服务辅助对象,为客户辅助对象创建和服务辅助对象形同的方法. 优点:客户不必写任何网络或I/O代码,调用远程方法就和运行在客户自己的本地JVM上对对象进行的正常方法一样. ...
- tomcat的catalina
Tomcat的核心分为3个部分: (1)Web容器---处理静态页面: (2)catalina --- 一个servlet容器-----处理servlet; (3)还有就是JSP容器,它就是把jsp页 ...
- ios 应用程序之间的跳转(内置程序的实现)
ios 应用程序之间的跳转(内置程序的实现) 一个程序若要跳到另一个程序.需要在目标程序的plist文件里面修改: 打开info.plist,添加一项URL types 展开URLtypes,再展开I ...
- Oracle数据库的启动和关闭
深刻理解Oracle数据库的启动和关闭 Oracle数据库提供了几种不同的数据库启动和关闭方式,本文将详细介绍这些启动和关闭方式之间的区别以及它们各自不同的功能. 一.启动和关闭Oracle数据库 对 ...
- 读jQuery源码 jQuery.data
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...
- 织梦list文章列表按权重排序
织梦的文章列表按权重排序 DEDECMS(织梦)5.6系统支持文档权重weight排序,可以在模板中使用: {dede:arclist row='10' titlelen='50' orderby=' ...
- vim note
2016-1-22 vim plugin collections: (参考 https://www.youtube.com/watch?v=0QFR-_wUoA0) vim-pathogen 插件管 ...
- Oracle EBS-SQL (SYS-12):查询各Profile的设置情况.sql
SELECT pro.profile_option_name, pro.user_profile_option_name, lev.level_type TYPE, --lev.level_code, ...
- Windows 7 with SP1简体中文旗舰版（微软MSDN原版）+ 激活密钥
在Windows 7六个版本中,旗舰版和企业版功能性能完全一样,同属诸版本之中的最高版本.现提供Windows 7 with SP1简体中文旗舰版(微软MSDN最新原版)+ 激活密钥如下: 32位版本 ...
- 两个DIV，左DIV宽度固定，右DIV自动填满剩余空间
<style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...