3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 * Copyright(c) 2006-2010 Ext JS, LLC
11 * http://www.extjs.com/license
13 Ext.onReady(function() {
14 // create the data store
15 var store = new Ext.data.ArrayStore({
17 {name: 'rating', type: 'int'},
18 {name: 'salary', type: 'float'},
23 // manually load local fake data
24 store.loadData(createFakeData(25));
26 var reorderer = new Ext.ux.ToolbarReorderer();
27 var droppable = new Ext.ux.ToolbarDroppable({
29 * Creates the new toolbar item from the drop event
31 createItem: function(data) {
32 var column = this.getColumnFromDragDrop(data);
34 return createSorterButton({
37 field: column.dataIndex,
44 * Custom canDrop implementation which returns true if a column can be added to the toolbar
45 * @param {Object} data Arbitrary data from the drag source
46 * @return {Boolean} True if the drop is allowed
48 canDrop: function(dragSource, event, data) {
49 var sorters = getSorters(),
50 column = this.getColumnFromDragDrop(data);
52 for (var i=0; i < sorters.length; i++) {
53 if (sorters[i].field == column.dataIndex) return false;
62 * Helper function used to find the column that was dragged
63 * @param {Object} data Arbitrary data from
65 getColumnFromDragDrop: function(data) {
66 var index = data.header.cellIndex,
67 colModel = grid.colModel,
68 column = colModel.getColumnById(colModel.getColumnId(index));
74 //create the toolbar with the 2 plugins
75 var tbar = new Ext.Toolbar({
76 items : ['Sorting order:', '-'],
77 plugins: [reorderer, droppable],
80 reordered: function(button) {
81 changeSortDirection(button, false);
87 var grid = new Ext.grid.GridPanel({
92 {header: 'Name', width: 160, sortable: false, dataIndex: 'name', id:'company'},
93 {header: 'Rating', width: 125, sortable: false, dataIndex: 'rating'},
94 {header: 'Salary', width: 125, sortable: false, dataIndex: 'salary', renderer: 'usMoney'}
96 autoExpandColumn: 'company',
101 title : 'Array Grid',
106 //here we tell the toolbar's droppable plugin that it can accept items from the columns' dragdrop group
108 var dragProxy = grid.getView().columnDrag,
109 ddGroup = dragProxy.ddGroup;
111 droppable.addDDGroup(ddGroup);
116 tbar.add(createSorterButton({
124 tbar.add(createSorterButton({
132 // render the grid to the specified div in the page
133 grid.render('grid-example');
136 //The following functions are used to get the sorting data from the toolbar and apply it to the store
139 * Tells the store to sort itself according to our sort data
142 store.sort(getSorters(), "ASC");
146 * Callback handler used when a sorter button is clicked or reordered
147 * @param {Ext.Button} button The button that was clicked
148 * @param {Boolean} changeDirection True to change direction (default). Set to false for reorder
149 * operations as we wish to preserve ordering there
151 function changeSortDirection(button, changeDirection) {
152 var sortData = button.sortData,
153 iconCls = button.iconCls;
155 if (sortData != undefined) {
156 if (changeDirection !== false) {
157 button.sortData.direction = button.sortData.direction.toggle("ASC", "DESC");
158 button.setIconClass(iconCls.toggle("sort-asc", "sort-desc"));
167 * Returns an array of sortData from the sorter buttons
168 * @return {Array} Ordered sort data from each of the sorter buttons
170 function getSorters() {
173 Ext.each(tbar.findByType('button'), function(button) {
174 sorters.push(button.sortData);
181 * Convenience function for creating Toolbar Buttons that are tied to sorters
182 * @param {Object} config Optional config object
183 * @return {Ext.Button} The new Button object
185 function createSorterButton(config) {
186 config = config || {};
188 Ext.applyIf(config, {
190 click: function(button, e) {
191 changeSortDirection(button, true);
194 iconCls: 'sort-' + config.sortData.direction.toLowerCase(),
198 return new Ext.Button(config);
202 * Returns an array of fake data
203 * @param {Number} count The number of fake rows to create data for
204 * @return {Array} The fake record data, suitable for usage with an ArrayReader
206 function createFakeData(count) {
207 var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay'],
208 lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson'],
209 ratings = [1, 2, 3, 4, 5],
210 salaries = [100, 400, 900, 1500, 1000000];
213 for (var i=0; i < (count || 25); i++) {
214 var ratingId = Math.floor(Math.random() * ratings.length),
215 salaryId = Math.floor(Math.random() * salaries.length),
216 firstNameId = Math.floor(Math.random() * firstNames.length),
217 lastNameId = Math.floor(Math.random() * lastNames.length),
219 rating = ratings[ratingId],
220 salary = salaries[salaryId],
221 name = String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
223 data.push([rating, salary, name]);