X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/grid/Panel.js diff --git a/src/grid/Panel.js b/src/grid/Panel.js index ed029cc2..38cc6ebb 100644 --- a/src/grid/Panel.js +++ b/src/grid/Panel.js @@ -14,26 +14,24 @@ If you are unsure which license is appropriate for your use, please contact the */ /** * @author Aaron Conran - * @class Ext.grid.Panel - * @extends Ext.panel.Table + * @docauthor Ed Spencer * - * Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged + * Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged * ``, GridPanel makes it easy to fetch, sort and filter large amounts of data. - * - * Grids are composed of 2 main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render. * - * {@img Ext.grid.Panel/Ext.grid.Panel1.png Ext.grid.Panel component} + * Grids are composed of two main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render. * * ## Basic GridPanel * + * @example * Ext.create('Ext.data.Store', { * storeId:'simpsonsStore', * fields:['name', 'email', 'phone'], * data:{'items':[ - * {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"}, - * {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}, - * {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"}, - * {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"} + * { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, + * { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, + * { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, + * { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } * ]}, * proxy: { * type: 'memory', @@ -43,34 +41,34 @@ If you are unsure which license is appropriate for your use, please contact the * } * } * }); - * + * * Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: Ext.data.StoreManager.lookup('simpsonsStore'), * columns: [ - * {header: 'Name', dataIndex: 'name'}, - * {header: 'Email', dataIndex: 'email', flex:1}, - * {header: 'Phone', dataIndex: 'phone'} + * { header: 'Name', dataIndex: 'name' }, + * { header: 'Email', dataIndex: 'email', flex: 1 }, + * { header: 'Phone', dataIndex: 'phone' } * ], * height: 200, * width: 400, * renderTo: Ext.getBody() * }); - * - * The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. + * + * The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. * In most apps we would be placing the grid inside another container and wouldn't need to use the * {@link #height}, {@link #width} and {@link #renderTo} configurations but they are included here to make it easy to get * up and running. - * + * * The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath * and finally the grid rows under the headers. - * + * * ## Configuring columns - * + * * By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each * column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns. * It's easy to configure each column - here we use the same example as above and just modify the columns config: - * + * * columns: [ * { * header: 'Name', @@ -90,18 +88,18 @@ If you are unsure which license is appropriate for your use, please contact the * width: 100 * } * ] - * + * * We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email * column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to - * a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns + * a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns * have been accounted for. See the {@link Ext.grid.column.Column column docs} for more details. - * + * * ## Renderers - * - * As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is + * + * As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is * tied to a particular column and is passed the value that would be rendered into each cell in that column. For example, * we could define a renderer function for the email column to turn each email address into a mailto link: - * + * * columns: [ * { * header: 'Email', @@ -111,48 +109,46 @@ If you are unsure which license is appropriate for your use, please contact the * } * } * ] - * + * * See the {@link Ext.grid.column.Column column docs} for more information on renderers. - * + * * ## Selection Models - * - * Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or + * + * Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or * update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of * the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and * CellSelectionModel, where individual cells are selected. - * + * * Grids use a Row Selection Model by default, but this is easy to customise like so: - * + * * Ext.create('Ext.grid.Panel', { * selType: 'cellmodel', * store: ... * }); - * + * * Specifying the `cellmodel` changes a couple of things. Firstly, clicking on a cell now * selects just that cell (using a {@link Ext.selection.RowModel rowmodel} will select the entire row), and secondly the * keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in * conjunction with editing. - * - * {@img Ext.grid.Panel/Ext.grid.Panel2.png Ext.grid.Panel cell editing} * * ## Editing - * + * * Grid has built-in support for in-line editing. There are two chief editing modes - cell editing and row editing. Cell * editing is easy to add to your existing column setup - here we'll just modify the example above to include an editor * on both the name and the email columns: - * + * * Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: Ext.data.StoreManager.lookup('simpsonsStore'), * columns: [ - * {header: 'Name', dataIndex: 'name', field: 'textfield'}, - * {header: 'Email', dataIndex: 'email', flex:1, - * field:{ - * xtype:'textfield', - * allowBlank:false + * { header: 'Name', dataIndex: 'name', field: 'textfield' }, + * { header: 'Email', dataIndex: 'email', flex: 1, + * field: { + * xtype: 'textfield', + * allowBlank: false * } * }, - * {header: 'Phone', dataIndex: 'phone'} + * { header: 'Phone', dataIndex: 'phone' } * ], * selType: 'cellmodel', * plugins: [ @@ -164,36 +160,34 @@ If you are unsure which license is appropriate for your use, please contact the * width: 400, * renderTo: Ext.getBody() * }); - * - * This requires a little explanation. We're passing in {@link #store store} and {@link #columns columns} as normal, but - * this time we've also specified a {@link #field field} on two of our columns. For the Name column we just want a default - * textfield to edit the value, so we specify 'textfield'. For the Email column we customized the editor slightly by - * passing allowBlank: false, which will provide inline validation. - * + * + * This requires a little explanation. We're passing in {@link #store store} and {@link #columns columns} as normal, but + * this time we've also specified a {@link Ext.grid.column.Column#field field} on two of our columns. For the Name column + * we just want a default textfield to edit the value, so we specify 'textfield'. For the Email column we customized the + * editor slightly by passing allowBlank: false, which will provide inline validation. + * * To support cell editing, we also specified that the grid should use the 'cellmodel' {@link #selType}, and created an * instance of the {@link Ext.grid.plugin.CellEditing CellEditing plugin}, which we configured to activate each editor after a * single click. - * - * {@img Ext.grid.Panel/Ext.grid.Panel3.png Ext.grid.Panel row editing} * * ## Row Editing - * + * * The other type of editing is row-based editing, using the RowEditor component. This enables you to edit an entire row * at a time, rather than editing cell by cell. Row Editing works in exactly the same way as cell editing, all we need to * do is change the plugin type to {@link Ext.grid.plugin.RowEditing}, and set the selType to 'rowmodel': - * + * * Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: Ext.data.StoreManager.lookup('simpsonsStore'), * columns: [ - * {header: 'Name', dataIndex: 'name', field: 'textfield'}, - * {header: 'Email', dataIndex: 'email', flex:1, - * field:{ - * xtype:'textfield', - * allowBlank:false + * { header: 'Name', dataIndex: 'name', field: 'textfield' }, + * { header: 'Email', dataIndex: 'email', flex:1, + * field: { + * xtype: 'textfield', + * allowBlank: false * } * }, - * {header: 'Phone', dataIndex: 'phone'} + * { header: 'Phone', dataIndex: 'phone' } * ], * selType: 'rowmodel', * plugins: [ @@ -205,51 +199,52 @@ If you are unsure which license is appropriate for your use, please contact the * width: 400, * renderTo: Ext.getBody() * }); - * + * * Again we passed some configuration to our {@link Ext.grid.plugin.RowEditing} plugin, and now when we click each row a row * editor will appear and enable us to edit each of the columns we have specified an editor for. - * + * * ## Sorting & Filtering - * + * * Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and filtering capabilities. It's * easy to set up a grid to be sorted from the start: - * + * * var myGrid = Ext.create('Ext.grid.Panel', { * store: { * fields: ['name', 'email', 'phone'], * sorters: ['name', 'phone'] * }, * columns: [ - * {text: 'Name', dataIndex: 'name'}, - * {text: 'Email', dataIndex: 'email'} + * { text: 'Name', dataIndex: 'name' }, + * { text: 'Email', dataIndex: 'email' } * ] * }); - * - * Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on + * + * Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on * more than one field at run time it's easy to do so by adding new sorters to the store: - * + * * myGrid.store.sort([ - * {property: 'name', direction: 'ASC'}, - * {property: 'email', direction: 'DESC'}, + * { property: 'name', direction: 'ASC' }, + * { property: 'email', direction: 'DESC' } * ]); - * - * {@img Ext.grid.Panel/Ext.grid.Panel4.png Ext.grid.Panel grouping} - * + * + * See {@link Ext.data.Store} for examples of filtering. + * * ## Grouping - * - * Grid supports the grouping of rows by any field. For example if we had a set of employee records, we might want to + * + * Grid supports the grouping of rows by any field. For example if we had a set of employee records, we might want to * group by the department that each employee works in. Here's how we might set that up: - * + * + * @example * var store = Ext.create('Ext.data.Store', { * storeId:'employeeStore', * fields:['name', 'senority', 'department'], * groupField: 'department', - * data:{'employees':[ - * {"name":"Michael Scott", "senority":7, "department":"Manangement"}, - * {"name":"Dwight Schrute", "senority":2, "department":"Sales"}, - * {"name":"Jim Halpert", "senority":3, "department":"Sales"}, - * {"name":"Kevin Malone", "senority":4, "department":"Accounting"}, - * {"name":"Angela Martin", "senority":5, "department":"Accounting"} + * data: {'employees':[ + * { "name": "Michael Scott", "senority": 7, "department": "Manangement" }, + * { "name": "Dwight Schrute", "senority": 2, "department": "Sales" }, + * { "name": "Jim Halpert", "senority": 3, "department": "Sales" }, + * { "name": "Kevin Malone", "senority": 4, "department": "Accounting" }, + * { "name": "Angela Martin", "senority": 5, "department": "Accounting" } * ]}, * proxy: { * type: 'memory', @@ -259,20 +254,20 @@ If you are unsure which license is appropriate for your use, please contact the * } * } * }); - * + * * Ext.create('Ext.grid.Panel', { * title: 'Employees', * store: Ext.data.StoreManager.lookup('employeeStore'), * columns: [ - * {header: 'Name', dataIndex: 'name'}, - * {header: 'Senority', dataIndex: 'senority'} - * ], + * { header: 'Name', dataIndex: 'name' }, + * { header: 'Senority', dataIndex: 'senority' } + * ], * features: [{ftype:'grouping'}], * width: 200, * height: 275, * renderTo: Ext.getBody() * }); - * + * * ## Infinite Scrolling * * Grid supports infinite scrolling as an alternative to using a paging toolbar. Your users can scroll through thousands @@ -288,14 +283,15 @@ If you are unsure which license is appropriate for your use, please contact the * disableSelection: true, * // ... * }); - * + * * ## Paging * * Grid supports paging through large sets of data via a PagingToolbar or PagingGridScroller (see the Infinite Scrolling section above). * To leverage paging via a toolbar or scroller, you need to set a pageSize configuration on the Store. * + * @example * var itemsPerPage = 2; // set the number of items you want per page - * + * * var store = Ext.create('Ext.data.Store', { * id:'simpsonsStore', * autoLoad: false, @@ -311,15 +307,15 @@ If you are unsure which license is appropriate for your use, please contact the * } * } * }); - * + * * // specify segment of data you want to load using params * store.load({ * params:{ - * start:0, + * start:0, * limit: itemsPerPage * } * }); - * + * * Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: store, @@ -337,11 +333,7 @@ If you are unsure which license is appropriate for your use, please contact the * displayInfo: true * }], * renderTo: Ext.getBody() - * }); - * - * {@img Ext.grid.Panel/Ext.grid.Panel5.png Ext.grid.Panel grouping} - * - * @docauthor Ed Spencer + * }); */ Ext.define('Ext.grid.Panel', { extend: 'Ext.panel.Table', @@ -349,32 +341,33 @@ Ext.define('Ext.grid.Panel', { alias: ['widget.gridpanel', 'widget.grid'], alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'], viewType: 'gridview', - + lockable: false, - + // Required for the Lockable Mixin. These are the configurations which will be copied to the // normal and locked sub tablepanels normalCfgCopy: ['invalidateScrollerOnRefresh', 'verticalScroller', 'verticalScrollDock', 'verticalScrollerType', 'scroll'], lockedCfgCopy: ['invalidateScrollerOnRefresh'], - + /** - * @cfg {Boolean} columnLines Adds column line styling + * @cfg {Boolean} [columnLines=false] Adds column line styling */ - + initComponent: function() { var me = this; if (me.columnLines) { me.setColumnLines(me.columnLines); } - + me.callParent(); }, - + setColumnLines: function(show) { var me = this, method = (show) ? 'addClsWithUI' : 'removeClsWithUI'; - - me[method]('with-col-lines') + + me[method]('with-col-lines'); } }); +