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里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...
随机推荐
- ResultSet与Result
微软的.NET平台上面的数据访问有一个特点,就是数据查询的结果,可以放在内存中,以XML格式进行描述,不需要一直与数据库保持在线连接,用DataSet + Data Adapter来实现! 而在JDB ...
- eclipse中输入的中文为繁体的问题
今天在eclipse中编写注释的时候发现,输入的中文都为繁体,且只在eclipse编辑器中为繁体,切换到网页中则为正常. 最后发现,竟然是输入法的shift+ctrl+F快捷键和eclipse的冲突. ...
- NULL、空指针，’\0’,0的去区别
http://blog.csdn.net/bailyzheng/article/details/7677628参考该博客 NULL是空指针常量.
- html combobox select控件设置默认选项
就想找个设置html combobox或者select默认选项的代码,百度搜了半小时不知所云的内容,其实很简单,代码如下 js的方式: var index = 你的下标 getElementById( ...
- navicat查看mysql数据表记录数不断变化
在使用navicat进行数据库管理的时候,在查看表对象的时候会发现,每次刷新,数据表的记录数不断变化,尤其是大表. 对于100万的数据经常会显示九十几万,当然通过count(*)出来的数据是正确的. ...
- nginx负载均衡配置（转）
www.s135.com 和 blog.s135.com 域名均指向 Nginx 所在的服务器IP. 用户访问http://www.s135.com,将其负载均衡到192.168.1.2:80.192 ...
- sersync+inotify实时备份数据
Sersync项目简介与框架 简介 Sersync项目利用inotify与rsync技术实现对服务器数据实时同步的解决方案,其中inotify用于监控sersync所在服务器上文件系统的事件变化,rs ...
- Struts2中ModelDriven的使用
它是Struts2种独有的一种接收用户输入的机制,想在项目中使用模型驱动 (ModelDriven)需要让Action实现com.opensymphony.xwork2.ModelDriven 接口, ...
- IIS怎么设置本地域名解析（本地域名测试配置）
对于IIS相信大家都不陌生,可以用来作为网站服务器,可以解析网站内容,访问时可以用端口的方式访问,也可以用域名的方式访问.下面我就介绍一下,怎么在本地用域名的方式访问,怎么用IIS进行本地域名解析. ...
- 使用mysql_query()方法操纵数据库以及综合实例
1.利用insert 语句添加记录 <? require('conn.php'); mysql_query( "insert into lyb ( title, content, au ...