row expander grid

app/view/grid/expander/Panel.js

@@ -0,0 +1,64 @@
+/**
+ * This is an example of using the grid with a RowExpander plugin that adds the ability
+ * to have a column in a grid which enables a second row body which expands/contracts.
+ *
+ * The expand/contract behavior is configurable to react on clicking of the column, double
+ * click of the row, and/or hitting enter while a row is selected.
+ */
+Ext.define('uas.view.grid.expander.Panel', {
+    extend: 'Ext.grid.Panel',
+
+    xtype: 'grid-expander-panel',
+
+    bind: '{companies}',
+    viewModel: {
+        stores: {
+            companies: {
+                type: 'companies',
+                autoLoad: true,
+            }
+        }
+    },
+    profiles: {
+        classic: {
+            width: 600,
+            pricechangeWidth: 100,
+            percentChangeColumnWidth: 100,
+            lastUpdatedColumnWidth: 100
+        },
+        neptune: {
+            width: 600,
+            pricechangeWidth: 100,
+            percentChangeColumnWidth: 100,
+            lastUpdatedColumnWidth: 100
+        },
+        graphite: {
+            width: 750,
+            pricechangeWidth: 110,
+            percentChangeColumnWidth: 120,
+            lastUpdatedColumnWidth: 150          
+        }
+    },
+    columns: [
+        { text: "Company", flex: 1, dataIndex: 'name'},
+        { text: "Price", formatter: 'usMoney', dataIndex: 'price', width: 100},
+        { text: "Change", dataIndex: 'priceChange', width: 100},
+        { text: "% Change", dataIndex: 'priceChangePct', width: 100},
+        { text: "Last Updated", formatter: 'date("m/d/Y")', dataIndex: 'priceLastChange', width: 100}
+    ],
+
+    plugins: {
+        rowexpander: {
+            rowBodyTpl: new Ext.XTemplate(
+                '<p><b>Company:</b> {name}</p>',
+                '<p><b>Change:</b> {change:this.formatChange}</p>',
+                {
+                    formatChange: function (v) {
+                        var color = v >= 0 ? 'green' : 'red';
+                        return '<span style="color: ' + color + ';">' +
+                            Ext.util.Format.usMoney(v) + '</span>';
+                    }
+                })
+        }
+    }
+});

resources/json/navigation.json

@@ -37,6 +37,7 @@
             {
                 "text": "展开列",
                 "leaf": true,
+                "target": "grid-expander-panel",
                 "iconCls": "x-fa fa-smile-o"
             },
             {