PageRenderTime 42ms CodeModel.GetById 24ms app.highlight 16ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.0.7/examples/grid/grid-plugins.js

https://bitbucket.org/srogerf/javascript
JavaScript | 230 lines | 184 code | 16 blank | 30 comment | 3 complexity | 368477a5d35221c18e05efb79e7d6785 MD5 | raw file
  1/*
  2
  3This file is part of Ext JS 4
  4
  5Copyright (c) 2011 Sencha Inc
  6
  7Contact:  http://www.sencha.com/contact
  8
  9GNU General Public License Usage
 10This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
 11
 12If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
 13
 14*/
 15Ext.Loader.setConfig({
 16    enabled: true
 17});
 18Ext.Loader.setPath('Ext.ux', '../ux');
 19
 20Ext.require([
 21    'Ext.grid.*',
 22    'Ext.data.*',
 23    'Ext.ux.RowExpander',
 24    'Ext.selection.CheckboxModel'
 25]);
 26
 27Ext.onReady(function(){
 28    Ext.define('Company', {
 29        extend: 'Ext.data.Model',
 30        fields: [
 31            {name: 'company'},
 32            {name: 'price', type: 'float'},
 33            {name: 'change', type: 'float'},
 34            {name: 'pctChange', type: 'float'},
 35            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
 36            {name: 'industry'},
 37            {name: 'desc'}
 38         ]
 39    });
 40    // Array data for the grids
 41    Ext.grid.dummyData = [
 42        ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
 43        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
 44        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
 45        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
 46        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
 47        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
 48        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
 49        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
 50        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
 51        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
 52        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
 53        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
 54        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
 55        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
 56        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
 57        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
 58        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
 59        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
 60        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
 61        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
 62        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
 63        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
 64        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
 65        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
 66        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
 67        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
 68        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
 69        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
 70        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
 71        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
 72    ];
 73
 74    // add in some dummy descriptions
 75    for(var i = 0; i < Ext.grid.dummyData.length; i++){
 76        Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
 77    }
 78
 79
 80    Ext.QuickTips.init();
 81
 82    var getLocalStore = function() {
 83        return Ext.create('Ext.data.ArrayStore', {
 84            model: 'Company',
 85            data: Ext.grid.dummyData
 86        });
 87    };
 88
 89
 90    ////////////////////////////////////////////////////////////////////////////////////////
 91    // Grid 1
 92    ////////////////////////////////////////////////////////////////////////////////////////
 93    // row expander
 94
 95    var grid1 = Ext.create('Ext.grid.Panel', {
 96        store: getLocalStore(),
 97        columns: [
 98            {text: "Company", flex: 1, dataIndex: 'company'},
 99            {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
100            {text: "Change", dataIndex: 'change'},
101            {text: "% Change", dataIndex: 'pctChange'},
102            {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
103        ],
104        width: 600,
105        height: 300,
106        plugins: [{
107            ptype: 'rowexpander',
108            rowBodyTpl : [
109                '<p><b>Company:</b> {company}</p><br>',
110                '<p><b>Summary:</b> {desc}</p>'
111            ]
112        }],
113        collapsible: true,
114        animCollapse: false,
115        title: 'Expander Rows in a Collapsible Grid',
116        iconCls: 'icon-grid',
117        renderTo: Ext.getBody()
118    });
119
120    ////////////////////////////////////////////////////////////////////////////////////////
121    // Grid 2
122    ////////////////////////////////////////////////////////////////////////////////////////
123    var sm = Ext.create('Ext.selection.CheckboxModel');
124    var grid2 = Ext.create('Ext.grid.Panel', {
125        store: getLocalStore(),
126        selModel: sm,
127        columns: [
128            {text: "Company", width: 200, dataIndex: 'company'},
129            {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
130            {text: "Change", dataIndex: 'change'},
131            {text: "% Change", dataIndex: 'pctChange'},
132            {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
133        ],
134        columnLines: true,
135        width: 600,
136        height: 300,
137        frame: true,
138        title: 'Framed with Checkbox Selection and Horizontal Scrolling',
139        iconCls: 'icon-grid',
140        renderTo: Ext.getBody()
141    });
142
143    ////////////////////////////////////////////////////////////////////////////////////////
144    // Grid 3
145    ////////////////////////////////////////////////////////////////////////////////////////
146    var grid3 = Ext.create('Ext.grid.Panel', {
147        store: getLocalStore(),
148        columns: [
149            Ext.create('Ext.grid.RowNumberer'),
150            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
151            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
152            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
153            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
154            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
155        ],
156        columnLines: true,
157        width:600,
158        height:300,
159        title:'Grid with Numbered Rows',
160        iconCls:'icon-grid',
161        renderTo: Ext.getBody()
162    });
163
164    ////////////////////////////////////////////////////////////////////////////////////////
165    // Grid 4
166    ////////////////////////////////////////////////////////////////////////////////////////
167    var selModel = Ext.create('Ext.selection.CheckboxModel', {
168        listeners: {
169            selectionchange: function(sm, selections) {
170                grid4.down('#removeButton').setDisabled(selections.length == 0);
171            }
172        }
173    });
174    
175    var grid4 = Ext.create('Ext.grid.Panel', {
176        id:'button-grid',
177        store: getLocalStore(),
178        columns: [
179            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
180            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
181            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
182            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
183            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
184        ],
185        columnLines: true,
186        selModel: selModel,
187
188        // inline buttons
189        dockedItems: [{
190            xtype: 'toolbar',
191            dock: 'bottom',
192            ui: 'footer',
193            layout: {
194                pack: 'center'
195            },
196            items: [{
197                minWidth: 80,
198                text: 'Save'
199            },{
200                minWidth: 80,
201                text: 'Cancel'
202            }]
203        }, {
204            xtype: 'toolbar',
205            items: [{
206                text:'Add Something',
207                tooltip:'Add a new row',
208                iconCls:'add'
209            }, '-', {
210                text:'Options',
211                tooltip:'Set options',
212                iconCls:'option'
213            },'-',{
214                itemId: 'removeButton',
215                text:'Remove Something',
216                tooltip:'Remove the selected item',
217                iconCls:'remove',
218                disabled: true
219            }]
220        }],
221
222        width: 600,
223        height: 300,
224        frame: true,
225        title: 'Support for standard Panel features such as framing, buttons and toolbars',
226        iconCls: 'icon-grid',
227        renderTo: Ext.getBody()
228    });
229});
230