主要参考的是官方文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>主播推荐-分数管理-标签管理</title>
  7.     <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  8.     <link rel="stylesheet" type="text/css" href="resources/css/KitchenSink-all.css" />
  9.     <script type="text/javascript" src="ext-all.js"></script>
  10. </head>
  11.  
  12. <body>
  13.     <div id="grid" style="width: 1000px;"></div>
  14.     <div id="ksgrid"></div>
  15.     <div id="onegrid"></div>
  16.     <div id="twogrid"></div>
  17.     <script>
  18.     Ext.onReady(function() {
  19.         var columns = [{
  20.             header: 'ID',
  21.             dataIndex: 'id',
  22.             sortable: true
  23.         }, {
  24.             header: '创建时间',
  25.             dataIndex: 'create',
  26.             width: 120
  27.         }, {
  28.             xtype: 'datecolumn',
  29.             header: '修改时间',
  30.             dataIndex: 'update',
  31.             width: 150
  32.         }, {
  33.             header: '标签名称',
  34.             dataIndex: 'title'
  35.         }, {
  36.             header: '推荐排序',
  37.             dataIndex: 'recommend'
  38.         }, {
  39.             header: '流量权重',
  40.             dataIndex: 'weigh'
  41.         }, {
  42.             header: '启用状态',
  43.             dataIndex: 'state'
  44.         }, {
  45.             menuDisabled: true,
  46.             sortable: false,
  47.             xtype: 'actioncolumn',
  48.             width: 150,
  49.             items: [{
  50.                 iconCls: 'sell-col',
  51.                 tooltip: 'Sell stock',
  52.                 handler: function(grid, rowIndex, colIndex) {
  53.                     var rec = grid.getStore().getAt(rowIndex);
  54.                     Ext.Msg.alert('Sell', 'Sell ' + rec.get('id'));
  55.                     var recNext = grid.getStore().getAt(rowIndex + 1);
  56.                 }
  57.             }, {
  58.                 getClass: function(v, meta, rec) {
  59.                     if (rec.get('change') < 0) {
  60.                         return 'alert-col';
  61.                     } else {
  62.                         return 'buy-col';
  63.                     }
  64.                 },
  65.                 getTip: function(v, meta, rec) {
  66.                     if (rec.get('change') < 0) {
  67.                         return 'Hold stock';
  68.                     } else {
  69.                         return 'Buy stock';
  70.                     }
  71.                 },
  72.                 handler: function(grid, rowIndex, colIndex) {
  73.                     var rec = grid.getStore().getAt(rowIndex),
  74.                         action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
  75.  
  76.                     Ext.Msg.alert(action, action + ' ' + rec.get('company'));
  77.                 }
  78.             }]
  79.         }];
  80.  
  81.         var data = [
  82.             ['1', '2014-12-11 00:30', '2014-12-11 00:30', '女神', '2', '25', '已启用'],
  83.             ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
  84.             ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
  85.             ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
  86.             ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用']
  87.         ];
  88.  
  89.         var store = new Ext.data.ArrayStore({
  90.             data: data,
  91.             fields: [{
  92.                 name: 'id'
  93.             }, {
  94.                 name: 'create'
  95.             }, {
  96.                 name: 'update'
  97.             }, {
  98.                 name: 'title'
  99.             }, {
  100.                 name: 'recommend'
  101.             }, {
  102.                 name: 'weigh'
  103.             }, {
  104.                 name: 'state'
  105.             }]
  106.         });
  107.         store.load();
  108.  
  109.         var grid = new Ext.grid.GridPanel({
  110.             autoHeight: true,
  111.             title: 'title',
  112.             renderTo: 'grid',
  113.             store: store,
  114.             columns: columns
  115.         });
  116.  
  117.         //自定义组件
  118.         //这是ExtJS中KitchenSink的例子
  119.         //这里把columns写入组件中了
  120.         Ext.define('KitchenSink.view.grid.ArrayGrid', {
  121.             extend: 'Ext.grid.Panel', //Ext.grid.GridPanel也可以
  122.             requires: [
  123.                 'Ext.grid.column.Action' //不太明白用途  字面上看应该是action列的依赖  但是去掉也可以
  124.             ],
  125.             xtype: 'array-grid', //定义了组件的xtype   在form那一章节里面有用到
  126.             stateful: true,
  127.             collapsible: true,
  128.             multiSelect: true,
  129.             stateId: 'stateGrid',
  130.             // height: 350,
  131.             title: 'Array Grid',
  132.             viewConfig: {
  133.                 stripeRows: true,
  134.                 enableTextSelection: true
  135.             },
  136.  
  137.             initComponent: function() {
  138.                 this.width = 650;
  139.                 this.columns = [{
  140.                     text: 'Company',
  141.                     flex: 1,
  142.                     sortable: false,
  143.                     dataIndex: 'company'
  144.                 }, {
  145.                     text: 'Price',
  146.                     width: 75,
  147.                     sortable: true,
  148.                     renderer: 'usMoney',
  149.                     dataIndex: 'price'
  150.                 }, {
  151.                     text: 'Change',
  152.                     width: 80,
  153.                     sortable: true,
  154.                     renderer: function(val) {
  155.                         if (val > 0) {
  156.                             return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
  157.                         } else if (val < 0) {
  158.                             return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
  159.                         }
  160.                         return val;
  161.                     },
  162.                     dataIndex: 'change'
  163.                 }, {
  164.                     text: '% Change',
  165.                     width: 100,
  166.                     sortable: true,
  167.                     renderer: function(val) {
  168.                         if (val > 0) {
  169.                             return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
  170.                         } else if (val < 0) {
  171.                             return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
  172.                         }
  173.                         return val;
  174.                     },
  175.                     dataIndex: 'pctChange'
  176.                 }, {
  177.                     xtype: 'datecolumn',
  178.                     text: 'Last Updated',
  179.                     width: 115,
  180.                     sortable: true,
  181.                     format: 'm/d/Y',
  182.                     dataIndex: 'lastChange'
  183.                 }, {
  184.                     menuDisabled: true,
  185.                     sortable: false,
  186.                     xtype: 'actioncolumn',
  187.                     width: 50,
  188.                     items: [{
  189.                         iconCls: 'sell-col',
  190.                         tooltip: 'Sell stock',
  191.                         handler: function(grid, rowIndex, colIndex) {
  192.                             var rec = grid.getStore().getAt(rowIndex);
  193.                             Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
  194.                         }
  195.                     }, {
  196.                         getClass: function(v, meta, rec) {
  197.                             if (rec.get('change') < 0) {
  198.                                 return 'alert-col';
  199.                             } else {
  200.                                 return 'buy-col';
  201.                             }
  202.                         },
  203.                         getTip: function(v, meta, rec) {
  204.                             if (rec.get('change') < 0) {
  205.                                 return 'Hold stock';
  206.                             } else {
  207.                                 return 'Buy stock';
  208.                             }
  209.                         },
  210.                         handler: function(grid, rowIndex, colIndex) {
  211.                             var rec = grid.getStore().getAt(rowIndex),
  212.                                 action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
  213.  
  214.                             Ext.Msg.alert(action, action + ' ' + rec.get('company'));
  215.                         }
  216.                     }]
  217.                 }];
  218.  
  219.                 this.callParent();
  220.             }
  221.         });
  222.  
  223.         var ksData = [
  224.             ['3m Co', '71.72', '0.02', '0.03%', '09/01/2015'],
  225.             ['Alcoa Inc', '29.01', '0.42', '1.47%', '09/01/2015'],
  226.             ['Altria Group Inc', '83.81', '0.28', '0.34%', '09/01/2015'],
  227.             ['American Express Company', '52.55', '0.01', '0.02%', '09/01/2015'],
  228.             ['American International Group, Inc.', '64.13', '0.31', '0.49%', '09/01/2015']
  229.         ];
  230.         var ksStore = new Ext.data.ArrayStore({
  231.             data: ksData,
  232.             fields: [{
  233.                 name: 'company'
  234.             }, {
  235.                 name: 'price'
  236.             }, {
  237.                 name: 'change'
  238.             }, {
  239.                 name: 'pctChange',
  240.             }, {
  241.                 name: 'lastChange'
  242.             }]
  243.         });
  244.         var ksGrid = new KitchenSink.view.grid.ArrayGrid({
  245.             autoHeight: true,
  246.             title: 'title',
  247.             renderTo: 'ksgrid',
  248.             store: ksStore
  249.         });
  250.         //-------------------------------------------------------------------------
  251.         //自定义组件2
  252.         var ksColumns = [{
  253.             text: 'Company',
  254.             flex: 1,
  255.             sortable: false,
  256.             dataIndex: 'company'
  257.         }, {
  258.             text: 'Price',
  259.             width: 75,
  260.             sortable: true,
  261.             renderer: 'usMoney',
  262.             dataIndex: 'price'
  263.         }, {
  264.             text: 'Change',
  265.             width: 80,
  266.             sortable: true,
  267.             renderer: function(val) {
  268.                 if (val > 0) {
  269.                     return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
  270.                 } else if (val < 0) {
  271.                     return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
  272.                 }
  273.                 return val;
  274.             },
  275.             dataIndex: 'change'
  276.         }, {
  277.             text: '% Change',
  278.             width: 100,
  279.             sortable: true,
  280.             renderer: function(val) {
  281.                 if (val > 0) {
  282.                     return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
  283.                 } else if (val < 0) {
  284.                     return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
  285.                 }
  286.                 return val;
  287.             },
  288.             dataIndex: 'pctChange'
  289.         }, {
  290.             xtype: 'datecolumn',
  291.             text: 'Last Updated',
  292.             width: 115,
  293.             sortable: true,
  294.             format: 'm/d/Y',
  295.             dataIndex: 'lastChange'
  296.         }, {
  297.             menuDisabled: true,
  298.             sortable: false,
  299.             xtype: 'actioncolumn',
  300.             width: 50,
  301.             items: [{
  302.                 iconCls: 'sell-col',
  303.                 tooltip: 'Sell stock',
  304.                 handler: function(grid, rowIndex, colIndex) {
  305.                     var rec = grid.getStore().getAt(rowIndex);
  306.                     Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
  307.                 }
  308.             }, {
  309.                 getClass: function(v, meta, rec) {
  310.                     if (rec.get('change') < 0) {
  311.                         return 'alert-col';
  312.                     } else {
  313.                         return 'buy-col';
  314.                     }
  315.                 },
  316.                 getTip: function(v, meta, rec) {
  317.                     if (rec.get('change') < 0) {
  318.                         return 'Hold stock';
  319.                     } else {
  320.                         return 'Buy stock';
  321.                     }
  322.                 },
  323.                 handler: function(grid, rowIndex, colIndex) {
  324.                     var rec = grid.getStore().getAt(rowIndex),
  325.                         action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
  326.  
  327.                     Ext.Msg.alert(action, action + ' ' + rec.get('company'));
  328.                 }
  329.             }]
  330.         }];
  331.         Ext.define('Ext.raku.OneGrid', {
  332.             extend: 'Ext.grid.GridPanel',  //Ext.grid.Panel也OK
  333.             autoHeight: true,
  334.             initComponent: function() {
  335.                 this.store = new Ext.data.ArrayStore({
  336.                     data: this.data,
  337.                     fields: this.fields
  338.                 });
  339.                 console.log(this.columns);
  340.                 this.callParent();
  341.             }
  342.         });
  343.  
  344.         var aOneGrid = new Ext.raku.OneGrid({
  345.             data: ksData,
  346.             fields: [{
  347.                 name: 'company'
  348.             }, {
  349.                 name: 'price'
  350.             }, {
  351.                 name: 'change'
  352.             }, {
  353.                 name: 'pctChange',
  354.             }, {
  355.                 name: 'lastChange'
  356.             }],
  357.             columns: ksColumns,
  358.             renderTo: 'onegrid'
  359.         });
  360.         //另一种继承的方式
  361.         //PS  继承自 Ext.grid.GridPanel 和 Ext.grid.Panel 都可以
  362.         Ext.raku.TwoGrid = Ext.extend(Ext.grid.Panel, {
  363.             autoHeight: true,
  364.             initComponent: function() {
  365.                 this.store = new Ext.data.ArrayStore({
  366.                     data: this.data,
  367.                     fields: this.fields
  368.                 });
  369.                 console.log(this.columns);
  370.                 this.callParent();
  371.             }
  372.         });
  373.  
  374.         var aTwoGrid = new Ext.raku.TwoGrid({
  375.             data: ksData,
  376.             fields: [{
  377.                 name: 'company'
  378.             }, {
  379.                 name: 'price'
  380.             }, {
  381.                 name: 'change'
  382.             }, {
  383.                 name: 'pctChange',
  384.             }, {
  385.                 name: 'lastChange'
  386.             }],
  387.             columns: ksColumns,
  388.             renderTo: 'twogrid'
  389.         });
  390.  
  391.     });
  392.  
  393.     </script>
  394. </body>
  395.  
  396. </html>

ExtJS 自定义组件的更多相关文章

  1. 【ExtJS】自定义组件datetimefield(二)

    接上[ExtJS]自定义组件datetimefield(一) 第三步:添加按钮事件绑定,获取选定的时间 privates:{ finishRenderChildren: function () { v ...

  2. 【ExtJS】自定义组件datetimefield(一)

    目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefiel ...

  3. 【ExtJS】关于自定义组件(一)

    一.目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefi ...

  4. ExtJS关于组件Component生命周期

    extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...

  5. ExtJs 自定义Vtype验证

    最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证.自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证.对于单字段的验证主要通过regex配置项指定自定义 ...

  6. ExtJS 4 组件详解

    ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component)",所有组件都是Ext.Component的子类,Ext.Component提供了生 ...

  7. ExtJS4.2 - 从 Hello World 到 自定义组件 -01 （为爱女伊兰奋斗）

    ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验.概述.项目搭建.国际化.HelloWorld.布局 —— 为爱女伊兰而奋斗 ——少走弯路,简单才是王道 1. 写在前面 ...

  8. Javascript - ExtJs - GridPanel组件

    GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...

  9. ExtJS自定义事件

    1.开发ExtJS组件UI的时候,基本上对于一些操作,就是与后台交互之类的多数都是用户进行点击触发一个事件,在事件的处理器handler里面调具体的业务方法,完成业务数据的处理以及业务流程的流转机制, ...

随机推荐

  1. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  2. lightoj 1408 Batting Practice

    题意:一个人若连续进k1个球或连续不进k2个球,游戏结束,给出这个人进球的概率p,求到游戏结束时这个投球个数的期望. 进球概率为p,不进概率 q=1-p 设 f[i] 表示连续 i 次不进距离连续k2 ...

  3. Demo 示例控制输入光标位置

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...

  4. javascript 学习笔记（权威指南）

    1.数组的sort()方法默认是按照字母排序的,下面举个栗子说明: 1)全是字母: var arr =["zu","fan","an",&q ...

  5. 文本域textarea显示输入剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. GMTED2010 高程数据下载

    http://topotools.cr.usgs.gov/GMTED_viewer/viewer.htm

  7. WIX 学习笔记- 1 简介

    一个项目 Code Complete 后,程序员们欢欣鼓舞,以为事情到此结束,可以 Happy 了.其实 Code Complete 五十之于百里.一个没有运行在设备上,为人们创造价值的项目是注定失败 ...

  8. WINDOWS硬件通知应用程序的常方法（五种方式：异步过程调用APC，事件方式VxD，消息方式，异步I/O方式，事件方式WDM）

    摘要:在目前流行的Windows操作系统中,设备驱动程序是操纵硬件的最底层软件接口.为了共享在设备驱动程序设计过程中的经验,给出设备驱动程序通知应用程序的5种方法,详细说明每种方法的原理和实现过程,并 ...

  9. oracle任务计划debug

    crontab -eno crontab for root - using an empty onecrontab: installing new crontab"/tmp/crontab. ...

  10. 汉诺塔III 汉诺塔IV 汉诺塔V (规律)

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...