- 浏览: 243606 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
问道721:
长见识了, 新建文档还不行, 写入内容后就可以了
利用poi操作word文档 -
laodongbao:
终于找到了我能理解和接受的的spring aop和动态代理的结 ...
spring Aop中动态代理 -
lqservlet:
可以看到存储文件! 全是xml文件,好多呀。
利用poi操作word文档 -
步青龙:
直接重命名xx.docx的文件为xx.zip,用WinRar打 ...
利用poi操作word文档 -
邦者无敌:
如果是JDK1.3呢?是否要将上面四个jar包手动加入
com.sun.crypto.provider.SunJCE
Grid is empty
Grid Doesn’t show images correctly
Sorting issues
Grids inside Tab Panels
Links inside grid cells
Combining Fields into One Column
How to modify appearance, behavior of specific rows or columns?
How to add click handlers to specific Grid cells?
Why is Store Empty even after calling load() on my Store
How to make grid resize with the window?
How to Update a cell (actually the store)?
How to reload a Grid from a different URL?
XML Issues
Grid still shows records even when it should be empty
How to debug what is going into Json Reader?
How to drag/drop/reorder rows?
Horizontal scrolling issues
Mixing fixed width and variable width columns
How to hide a column?
How to wrap contents within a cell of a fixed width grid column?
How to add a column with tools for each record?
How to center elements in a toolbar?
How to delete all selected rows?
Problems with paging or total record count
Get a record from the grid by row index
Load data to a grid from two diferent server calls/stores
"Auto size" columns to the largest element in them
Disable editing of particular rows
What is difference between contentEl, applyTo and renderTo?
Dirty Record / Red Flag display (modifying, etc.)
Editor Grid - ComboBox displays "<div class="x-grid-col-1 x-grid-cell-inner">[/
1. Grid is empty / Populating the grid problems:
Grid doesn’t show data
Store didn’t load
Grid is empty
Grid didn’t render
Grid not listening to store
Likely problems to check:
Did you define the grid height using one of the following? (height, autoHeight, or within a container with layout:‘fit’)
Code:
grid = new Ext.grid.EditorGridPanel({ //other configs... //Don't forget to specify the height! //Three options: (1) specify height explicitly, (2) enable autoHeight, (3) put grid inside a container with layout:'fit' autoHeight:true //autoHeight resizes the height to show all records //-or- height:350Did you load the store? store.load()
Did you render the grid? Render a grid using one of the following:
use 'renderTo' or 'el' in the grid config to render automatically or
defer rendering and explicitly render the grid using grid.render()
Does the element you rendered to exist?
If using JSON, is the JSON properly formed (paste the JSON response into the checker at http://www.jslint.com/ to verify)
Do not use periods in field names for JSON ("my.success"="ext will not decode")
Does the reader correctly specify the correct root for the JSON being used?
Check the sample response packet from a JSONReader. You will want to set a root option (rows in example below) and then wrap your array in a JSON response. Something like:
Code:
{ 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT","DescricaoProduto":"7 UP Reg. 12 GR 1,50 PET","UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR","CodigoMarca":"35","ProdutoPesoBruto":"19.448","ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG","ProdutoVolume":"18.000","ProdutoVolumeUM":"L","ProdutoUM_PAL":"36","Eliminar":""}]}Try to track down problems using firebug:
Were there any errors reported by firebug?
Was a request sent out (Check CONSOLE for requests that were POSTED).
Was a response received for the request?
If so, did you post it into http://www.jslint.com/ to verify it’s in proper form?
Is the response what you expected, shows total number of records, the root has an array, etc.?
Did the store load?
Add listeners to see if the store loaded or if there were exceptions. See next post for listeners to add.
A few of the key listeners to watch for:
Store ‘datachanged’
Store ‘load’
Store ‘loadexception’
Proxy ‘load’ / ‘loadexception’
You can also add the ajax and grid listeners shown in following post
2. Grid Doesn’t show images correctly (checkboxes, etc.)
Are CSS files attached correctly? (Check Firebug, XHR for any red links)
The css references may be incorrect. Check the relative paths. (use ./ instead of /)
3. Sorting issues:
Check the store configuration (sortInfo and sort type) or use setDefaultSort()
PHP Code:
sortInfo:{field: 'fieldname', direction: 'ASC'}
//or call:
store.setDefaultSort('fieldname', 'ASC');
Also check if the sort type was set.
If it’s only sorting the current page and you want to sort on entire database query then remoteSort should be set to true (remoteSort defaults to local sorting)
4. Grids inside Tab Panels
A GridPanel is like any other panel, you can add it directly as an item to a tab
Make sure the Grid Panel IS the Tab Panel (Grid is a panel component already so there is no need to wrap it with another panel).
Set layoutOnTabChange on the Tab Panel (Set to true to do a layout of tab items as tabs are changed.)
Code:
var g = new Ext.grid.GridPanel(....); //grid objectvar tabs2 = new Ext.TabPanel({ renderTo: document.body, activeTab: 0, width:'100%', height:150, frame:true, defaults:{autoScroll: true}, items:[g] //the grid object5. Links inside grid cells
Define a custom renderer or
You could use the rowselect event of Ext.grid.RowSelectionModel. You might do something like this:
Code:
function handleRowSelect(selectionModel, rowIndex, selectedRecord) { //assuming the record has a field named 'url' or build it as you need to var url = selectedRecord.get('url'); //if you want to open another window window.open(url);}grid.getSelectionModel().on('rowselect', handleRowSelect);6. Combining Fields into One Column:
Concatenate the two elements in the Record definition.
Code:
var reader = new Ext.data.ArrayReader({}, [ //combine two fields into one //the first field does not have obj. //any additional fields that are combined use a preceding obj. //sorting will be by the first field specified (first_name in this example) {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'}, {name: 'age'} ]); var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ reader: reader, data: Ext.grid.dummyData }), columns: [ {header: 'Full Name', dataIndex: 'full_name'}, {header: 'Age', dataIndex:'age'} ] });The convert function in a field definition now receives in the second parameter the whole of the data object that is being used to create the Record, so you can create any value you like in a field.
For another alternative that allows sorting on the resulting "calculated" field see this thread
7. How to modify appearance, behavior of specific rows or columns?
You can use a function of your own to add a CSS class name of your own choosing a Grid row depending upon the data in the underlying Record object.
Specify an id in the column model for each field that you would like to modify. A CSS class will be generated in the form x-grid3-td-{COLUMNID}. For example the array-grid example has a column with an id of 'company'. If you wanted to change the cursor to be a text cursor add this css after the core css is loaded:
HTML Code:
.x-grid3-td-company { cursor: text;}Override the getRowClass
Use a function in the Grid's View and return a class name string.
Code:
gridView = new Ext.grid.GridView({ //forceFit: true, getRowClass : function (row, index) { var cls = ''; var data = row.data; switch (data.SEVERITY) { case 'C' : cls = 'alarmGridCritical' break; case 'M' : cls = 'alarmGridMinor' break; } return cls; } });See example here.
8. How to add click handlers to specific Grid cells?
Add a listener for the Grid's cellclick event. The listener is passed the row and column indexed clicked on. The column index may be used to determine which field was clicked on (Columns may be reordered by the user so using the column index as the field index is unsafe).
A cellclick event handler must find the relevant information like this:
Code:
function(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); // Get the Record for the row // Get field name for the column var fieldName = grid.getColumnModel().getDataIndex(columnIndex); var data = record.get(fieldName);}9. Store is empty even after calling load() on my Store
Store.load() is asynchronous when using remote data (through an HttpProxy, or a ScriptTagProxy).
It returns immediately after the request is sent to the server and continues to process code without waiting. To control postprocessing of returned data, use a callback to the load call, or add listeners to the Store's "load" and "loadexception"] (most problems will be indicated here) events.
PHP Code:
myStore.load();
alert(myStore.getCount());// no way! won't work. the store was just requested, it's not 'back' from the server yet.
//add listener to store's load event:
myStore.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.log('Data Store listener fired (load), arguments:',arguments);
console.log('Store count = ',store.getCount());
}
,scope:this
}
myStore.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.log('Data Store listener fired (load), arguments:',arguments);
console.log('Store count = ',store.getCount());
}
,scope:this
}
10. Make grid resize with the window
Place the Grid in a "Viewport container" with the configuration of layout:'fit'
For more on layout issues see this thread.
11. Updating a cell (actually the store)
You actually update the store, not a cell:
Code:
var record = editorGridPanel.getStore().getAt(row);record.set('fieldname', newValue);If this Field is an editor, you can collect the Grid cell's value in a beforeedit event handler (see Listeners in following post). See getSelectedCell in API docs.
If using mouseover:
Code:
grid.on("mouseover", function(e, t) { var row; if((row = this.findRowIndex(t)) !== false){ var record = this.store.getAt(row); var id = record.get('Id'); }}, grid);12. How to reload a Grid from a different URL?
Usually, this question means that different '''parameters''' need to be passed to the same server script. The answer is "Do not embed parameters in the DataProxy's URL"
To add parameters to a Grid's server requests add a listener for its Proxy's beforeload event:
Code:
var proxy = new Ext.data.HttpProxy({ url: '/DoSearch.php'});// Add the HTTP parameter searchTerm to the requestproxy.on('beforeload', function(p, params) { params.searchTerm = searchValue;});13. XML Issues
Many people will recommend you use JSON.
Xml has a huge performance penalty associated with it, and JSON is just plain simpler (and therefore much easier to manipulate).
If there is a specific requirement for xml, check if your server setting the right content-type for the xml (Response.ContentType = "text/xml"). For example have the server return the correct mime type for the XML document:
Code:
<mime-mapping> <extension>xml</extension> <mime-type>text/xml</mime-type> </mime-mapping>14. Grid still shows records even when it should be empty
Check that you are return an empty array and not null in the response from your server.
The store will get updated with an empty array, thus showing nothing.
If you return null then the grid doesn't get updated (the store's data has not changed).
15. How to debug the response going into JsonReader
In firebug, go to ext-all-debug.
find "getJsonAccessor: function(){"
Scroll up a bit to read, set a breakpoint there, and reload the page
16. How to drag/drop/reorder rows?
See this thread
17. Horizontal scrolling issues
If you have a GridPanel with horizontall scroll and when go to another page the horizontal scroll reverts to the left side position you can try this code to prevent it from scrolling back:
Code:
grid.getStore().on({ beforeload: function() { this.prevScrollState = this.getScrollState(); this.prevScrollState.top = 0; }, load: function() { this.restoreScroll(this.prevScrollState); remove this.prevScrollState; }, scope: grid.getView()});18. Mixing fixed width and variable width columns
Imagine a scenario where there are columns 'Salutation' and 'Name' which needs to be at 50px width each, and a column 'notes' which should be sized to the grid's size.
Solution 1:
Set a width for 'Salutation' and 'Name'.
Give an "id" to the 'notes' column and use the autoExpandColumn config option of the GridPanel. The Array grid example in the examples/grid/array-grid.js does just this. Price, Change, % Change, and Last Updated are all fixed width. Company will stretch to fit the rest of the size available. Notice that it has an "id" NOT a dataIndex. The autoExpandColumn config only takes id's, not dataIndex's.
Solution 2:
Try: viewConfig:{forceFit:true}
19. How to hide a column
Navigate to: http://extjs.com/deploy/dev/examples/grid/array-grid.html
In Firebug's console type: Ext.getCmp('ext-comp-1001').getColumnModel().setHidden(0, true)
Ext.getCmp('ext-comp-1001') returns the GridPanel object.
getColumnModel() gets it's column model.
setHidden(0, true) hides column 0 (0 = the first column).
20. How to wrap contents within a cell of a fixed width grid column?
The goal is to have the contents of a cell automatically wrap into a fixed defined width according to the column definition instead of having to manually drag the column width to expand the column.
Give the column you want to wrap an ID:
http://extjs.com/deploy/dev/docs/?class=Ext.grid.ColumnModel&member=id
Then define CSS classes like this:
Code:
td.x-grid3-td-<your id> { overflow: hidden;}td.x-grid3-td-<your id> div.x-grid3-cell-inner { white-space: normal;}If you want to apply this to the entire grid apply it to the basic td class of the grid.
21. How to add a column with tools for each record?
Approach 1
Given the array grid example in the docs and your packaged download...
http://extjs.com/deploy/dev/examples/grid/array-grid.js
Add an extra column to the column model definition and a custom renderer.
Code:
{header: "Controls", width: 60, sortable: false, renderer: function() { return '<div class="controlBtn"><img src="../shared/icons/fam/cog_edit.png" mce_src="../shared/icons/fam/cog_edit.png" width="16" height="16" class="control_edit"><img src="../shared/icons/fam/folder_go.png" mce_src="../shared/icons/fam/folder_go.png" width="16" height="16" class="control_go"></div>';}, dataIndex: 'company'}Then you would setup an event handler on the click event.
PHP Code:
grid.on('click', function(e) {
var btn = e.getTarget('.controlBtn');
if (btn) {
var t = e.getTarget();
var v = this.view;
var rowIdx = v.findRowIndex(t);
var record = this.getStore().getAt(rowIdx);
var control = t.className.split('_')[1];
switch (control) {
case 'edit':
console.log('edit this record - ' + record.id);
break;
case 'go':
console.log('go to this record - ' + record.id);
break;
}
}
}, grid);
Add the following CSS rule in array-grid.html to give some padding and change the cursor.
HTML Code:
<style> .controlBtn img { padding-left: 4px; cursor: pointer; } </style>Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.
Approach 2 utilizes a plugin as discussed here:
PHP Code:
// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* RowAction plugin for Ext grid
*
* Contains renderer for an icon and fires events when icon is clicked
*
* @author Ing. Jozef Sakalos <jsakalos at aariadne dot com>
* @date December 29, 2007
* @version $Id: Ext.ux.grid.RowAction.js 126 2008-01-31 03:33:50Z jozo $
*
* @license Ext.ux.grid.RowAction is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.RowAction
* @extends Ext.util.Observable
*
* Creates new RowAction plugin
* @constructor
* @param {Object} config The config object
*
* @cfg {String} iconCls css class that defines background image
*/
Ext.ux.grid.RowAction = function(config) {
Ext.apply(this, config);
/**
* @class Ext.ux.grid.RowAction
* @extends Ext.util.Observable
*
* Creates new RowAction plugin
* @constructor
* @param {Object} config The config object
*
* @cfg {String} iconCls css class that defines background image
*/
Ext.ux.grid.RowAction = function(config) {
Ext.apply(this, config); this.addEvents({
/**
* @event beforeaction
* Fires before action event. Return false to cancel the subsequent action event.
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
beforeaction:true
/**
* @event action
* Fires when icon is clicked
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
,action:true
});
Ext.ux.grid.RowAction.superclass.constructor.call(this);
};
Ext.ux.grid.RowAction.superclass.constructor.call(this);
}; Ext.extend(Ext.ux.grid.RowAction, Ext.util.Observable, {
header:''
,sortable:false
,dataIndex:''
,width:20
,fixed:true
,lazyRender:true
,iconCls:''
// private - plugin initialization
,init:function(grid) {
this.grid = grid;
var view = grid.getView();
grid.on({
render:{scope:this, fn:function() {
view.mainBody.on({
click:{scope:this, fn:this.onClick}
});
}}
});
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
retval += this.style ? ' style="' + this.style + '"' : '';
retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
retval += '> </div>';
return retval;
}.createDelegate(this);
}
} // eo function init // override for custom processing
// private - plugin initialization
,init:function(grid) {
this.grid = grid;
var view = grid.getView();
grid.on({
render:{scope:this, fn:function() {
view.mainBody.on({
click:{scope:this, fn:this.onClick}
});
}}
});
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
retval += this.style ? ' style="' + this.style + '"' : '';
retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
retval += '> </div>';
return retval;
}.createDelegate(this);
}
} // eo function init // override for custom processing
,getIconCls:function(record, row, col) {
return this.boundIndex ? record.get(this.boundIndex) : this.iconCls;
} // eo function getIconCls
// private - icon click handler
,onClick:function(e, target) {
var record, iconCls;
var row = e.getTarget('.x-grid3-row');
var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell')); if(
,onClick:function(e, target) {
var record, iconCls;
var row = e.getTarget('.x-grid3-row');
var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell')); if(false !== row && false !== col) {
record = this.grid.store.getAt(row.rowIndex);
iconCls = this.getIconCls(record, row.rowIndex, col);
if(Ext.fly(target).hasClass(iconCls)) {
if(false !== this.fireEvent('beforeaction', this.grid, record, row.rowIndex)) {
this.fireEvent('action', this.grid, record, row.rowIndex, e);
}
}
}
} // eo function onClick
});
// eof
// eof
22. How to center elements in a toolbar?
PHP Code:
myToolbar.getEl().child("table").wrap({tag:'center'})
PHP Code:
var t = myGridPanel.getBottomToolbar().el;
var c = t.createChild("<center></center>");
c.appendChild(t.child("table"));
23. How to delete all selected rows?
PHP Code:
Ext.each(contactgrid.getSelectionModel().getSelections(), contactgrid.getStore().remove, contactgrid.getStore());
PHP Code:
tbar: [
{
text: 'Delete Contacts',
iconCls:'remove',
handler : function(t){
console.log(' inside "Delete Contacts" with arguments = ',arguments);
grid = contactgrid;
//get the store associated with the grid:
store = grid.getStore();
//get the store associated with the grid:
store = grid.getStore(); //returns array of record objects for selected rows (all info for row)
var selections = grid.selModel.getSelections();
console.log(' grid = ',grid);
console.log(' selections = ',selections); var n = selections.length;
for(var i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
n = selections.length;
for(var i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
24. Issues with paging or total record count
Paging is typically handled on the server side.
The idea is to reduce the amount of data exchanged with the client.
Configure the store and reader objects accordingly, especially the reader's totalProperty (Json reader) / totalRecords (XML reader) property.
Pass the paging requirements to the server when the store is loaded.
PHP Code:
bbar: new Ext.PagingToolbar({
pageSize: 25, //when you go to next page I believe it uses this number
...
})
store.load({params:{start: 0, limit: 25}});//pass params for first page load
//or if you want to use autoLoad in the store's configuration:
autoLoad: {params:{start: 0, limit: 25}}
autoLoad: {params:{start: 0, limit: 25}}
Check using Firebug what all is sent out in the POST and retrieve that information server side to generate the necessary sql to return the appropriate data. Something to the effect of:
PHP Code:
/* By specifying the start/limit params in ds.load
* the values are passed here
* if using ScriptTagProxy the values will be in $_GET
* if using HttpProxy the values will be in $_POST (or $_REQUEST)
* the following two lines check either location, but might be more
* secure to use the appropriate one according to the Proxy being used
*/
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
//check for the 'sort' and 'dir' in the POST array.
$sortDir = isset($_POST['dir']) ? $_POST['dir'] : 'ASC';//default to ASC if not set
$sortBy = isset($_POST['sort']) ? $_POST['sort] : 'company';//default to company name if not set
$sql_count = 'SELECT * FROM ' . $table;
$sql = $sql_count . ' ORDER BY ' . $sortBy. ' ' . $sortDir . ' LIMIT ' . $start . ', '. $end;
$result_count = mysql_query($sql_count);
$rows = mysql_num_rows($result_count);
SELECT * FROM ' . $table;
$sql = $sql_count . ' ORDER BY ' . $sortBy. ' ' . $sortDir . ' LIMIT ' . $start . ', '. $end;
$result_count = mysql_query($sql_count);
$rows = mysql_num_rows($result_count);
25. Get a record from the grid by row index
Code:
var record = grid.getStore().getAt(rowIndex);26. Load data to a grid from two diferent server calls/stores
Adding records from Store 2 to Store 2.
PHP Code:
var store2 = new Ext.data.Store({
...
});
var store1 = new Ext.data.Store({
...
listeners: {
load: function(store) {
store2.addRecords({records: store.getRange()},{add: true});
}
}
});
Using records from Store 2 with Store 1.
For example, the first data col comes from Store 1 and the data from Store 2 forms cols 2 and 3. You can use a renderer that finds the data in the second store if the 'other' columns are just 'lookup' data, e.g.:
PHP Code:
var store1 = new Ext.data.Store({
...,
fields: ['field1', 'field2']
});
var store2 = new Ext.data.Store({
...
id: 'field2',
fields: ['field2', 'fieldA', 'fieldB']
}); var renderA = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldB') : '';
}
var columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
renderA = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldB') : '';
}
var columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
27. "Auto size" columns to the largest element in them
Option 1
Option 2
28. Disable editing of particular rows
Use beforeedit and return false to stop the edit
PHP Code:
var grid = new Ext.grid.EditorGridPanel({
...
isCellEditable: function(colIndex, rowIndex) {
var field = this.getColumnModel().getDataIndex(colIndex);
if (field == 'value') {
var record = this.getStore().getAt(rowIndex);
if (!record.get('enable_edit').getValue()) { //enable_edit is field in record
return false;//return false to deny editing
}
}
return Ext.grid.EditorGridPanel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
});
Option/Example 2
PHP Code:
myColumnModel.isCellEditable = function(colIndex, rowIndex){ return !someBooleanStoredSomewhere; };
Option/Example 3
PHP Code:
this.on('beforeedit', Comment.Methods.commentUpdateCheckPermission);
commentUpdateCheckPermission : function (commentData) {
if (cds.data.items[commentData.row].data.user_ID != Ext.util.Format.uppercase(VMOC.myUUID)) {
Ext.MessageBox.alert('Permission denied', 'You do not have permission to edit this comment.');
cds.rejectChanges();
commentData.cancel = true;
}
}
commentUpdateCheckPermission : function (commentData) {
if (cds.data.items[commentData.row].data.user_ID != Ext.util.Format.uppercase(VMOC.myUUID)) {
Ext.MessageBox.alert('Permission denied', 'You do not have permission to edit this comment.');
cds.rejectChanges();
commentData.cancel = true;
}
}
29. What is difference between contentEl, applyTo and renderTo?
For most use cases you should be able to use the contentEl config option with a div in your markup with a css class of x-hidden.
contentEl - This config option is used to take existing content and place it in the body of a new panel. It is not going to be the actual panel itself. (It will actually copy the innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.
applyTo - This config option allows you to use pre-defined markup to create an entire Panel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements must be in the correct order/hierarchy. Any components which are not found and need to be created will be autogenerated.
renderTo - This config option allows you to render a Panel as its created. This would be the same as saying myPanel.render(ELEMENT_TO_RENDER_TO);
30. Dirty Record / Red Flag (modifying, etc.)
To disable "dirty cell mark" for a record field. Use the following line when you modify a cell you do not wish to have a "dirty" marker. This will get the record to think that this cell has not been modified without having to commit the entire record.
PHP Code:
record.modified[this.dataIndex] = undefined; // will prevent a "dirty" flag to be displayed on the check box
To remove the red triangle only from some records (not all), hook into the grid's validateedit event and cancel it if the edit occurred on a targeted row, then set the field's new value in the Record directly:
PHP Code:
grid.on('validateedit', function(e) {
var myTargetRow = 6;
if (e.row == myTargetRow) {
e.cancel = true;
e.record.data[e.field] = e.value;
}
})
e.row == myTargetRow) {
e.cancel = true;
e.record.data[e.field] = e.value;
}
})
Change the cell style back to the one without the little red corner and update the data store with the new value (Does not execute an XHR to send/commit data to the server.)
PHP Code:
grid.on('afteredit', afterEdit, this );
function afterEdit(val) {
val.record.commit();
};
Change the CSS to never show the dirty flag:
PHP Code:
.x-grid-dirty-cell {
background-image:none;
}
Or:
PHP Code:
<style type="text/css">
.x-grid3-td-[id-of-column] {background-image:none!important;}
</style>
Grid Doesn’t show images correctly
Sorting issues
Grids inside Tab Panels
Links inside grid cells
Combining Fields into One Column
How to modify appearance, behavior of specific rows or columns?
How to add click handlers to specific Grid cells?
Why is Store Empty even after calling load() on my Store
How to make grid resize with the window?
How to Update a cell (actually the store)?
How to reload a Grid from a different URL?
XML Issues
Grid still shows records even when it should be empty
How to debug what is going into Json Reader?
How to drag/drop/reorder rows?
Horizontal scrolling issues
Mixing fixed width and variable width columns
How to hide a column?
How to wrap contents within a cell of a fixed width grid column?
How to add a column with tools for each record?
How to center elements in a toolbar?
How to delete all selected rows?
Problems with paging or total record count
Get a record from the grid by row index
Load data to a grid from two diferent server calls/stores
"Auto size" columns to the largest element in them
Disable editing of particular rows
What is difference between contentEl, applyTo and renderTo?
Dirty Record / Red Flag display (modifying, etc.)
Editor Grid - ComboBox displays "<div class="x-grid-col-1 x-grid-cell-inner">[/
1. Grid is empty / Populating the grid problems:
Grid doesn’t show data
Store didn’t load
Grid is empty
Grid didn’t render
Grid not listening to store
Likely problems to check:
Did you define the grid height using one of the following? (height, autoHeight, or within a container with layout:‘fit’)
Code:
grid = new Ext.grid.EditorGridPanel({ //other configs... //Don't forget to specify the height! //Three options: (1) specify height explicitly, (2) enable autoHeight, (3) put grid inside a container with layout:'fit' autoHeight:true //autoHeight resizes the height to show all records //-or- height:350Did you load the store? store.load()
Did you render the grid? Render a grid using one of the following:
use 'renderTo' or 'el' in the grid config to render automatically or
defer rendering and explicitly render the grid using grid.render()
Does the element you rendered to exist?
If using JSON, is the JSON properly formed (paste the JSON response into the checker at http://www.jslint.com/ to verify)
Do not use periods in field names for JSON ("my.success"="ext will not decode")
Does the reader correctly specify the correct root for the JSON being used?
Check the sample response packet from a JSONReader. You will want to set a root option (rows in example below) and then wrap your array in a JSON response. Something like:
Code:
{ 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT","DescricaoProduto":"7 UP Reg. 12 GR 1,50 PET","UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR","CodigoMarca":"35","ProdutoPesoBruto":"19.448","ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG","ProdutoVolume":"18.000","ProdutoVolumeUM":"L","ProdutoUM_PAL":"36","Eliminar":""}]}Try to track down problems using firebug:
Were there any errors reported by firebug?
Was a request sent out (Check CONSOLE for requests that were POSTED).
Was a response received for the request?
If so, did you post it into http://www.jslint.com/ to verify it’s in proper form?
Is the response what you expected, shows total number of records, the root has an array, etc.?
Did the store load?
Add listeners to see if the store loaded or if there were exceptions. See next post for listeners to add.
A few of the key listeners to watch for:
Store ‘datachanged’
Store ‘load’
Store ‘loadexception’
Proxy ‘load’ / ‘loadexception’
You can also add the ajax and grid listeners shown in following post
2. Grid Doesn’t show images correctly (checkboxes, etc.)
Are CSS files attached correctly? (Check Firebug, XHR for any red links)
The css references may be incorrect. Check the relative paths. (use ./ instead of /)
3. Sorting issues:
Check the store configuration (sortInfo and sort type) or use setDefaultSort()
PHP Code:
sortInfo:{field: 'fieldname', direction: 'ASC'}
//or call:
store.setDefaultSort('fieldname', 'ASC');
Also check if the sort type was set.
If it’s only sorting the current page and you want to sort on entire database query then remoteSort should be set to true (remoteSort defaults to local sorting)
4. Grids inside Tab Panels
A GridPanel is like any other panel, you can add it directly as an item to a tab
Make sure the Grid Panel IS the Tab Panel (Grid is a panel component already so there is no need to wrap it with another panel).
Set layoutOnTabChange on the Tab Panel (Set to true to do a layout of tab items as tabs are changed.)
Code:
var g = new Ext.grid.GridPanel(....); //grid objectvar tabs2 = new Ext.TabPanel({ renderTo: document.body, activeTab: 0, width:'100%', height:150, frame:true, defaults:{autoScroll: true}, items:[g] //the grid object5. Links inside grid cells
Define a custom renderer or
You could use the rowselect event of Ext.grid.RowSelectionModel. You might do something like this:
Code:
function handleRowSelect(selectionModel, rowIndex, selectedRecord) { //assuming the record has a field named 'url' or build it as you need to var url = selectedRecord.get('url'); //if you want to open another window window.open(url);}grid.getSelectionModel().on('rowselect', handleRowSelect);6. Combining Fields into One Column:
Concatenate the two elements in the Record definition.
Code:
var reader = new Ext.data.ArrayReader({}, [ //combine two fields into one //the first field does not have obj. //any additional fields that are combined use a preceding obj. //sorting will be by the first field specified (first_name in this example) {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'}, {name: 'age'} ]); var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ reader: reader, data: Ext.grid.dummyData }), columns: [ {header: 'Full Name', dataIndex: 'full_name'}, {header: 'Age', dataIndex:'age'} ] });The convert function in a field definition now receives in the second parameter the whole of the data object that is being used to create the Record, so you can create any value you like in a field.
For another alternative that allows sorting on the resulting "calculated" field see this thread
7. How to modify appearance, behavior of specific rows or columns?
You can use a function of your own to add a CSS class name of your own choosing a Grid row depending upon the data in the underlying Record object.
Specify an id in the column model for each field that you would like to modify. A CSS class will be generated in the form x-grid3-td-{COLUMNID}. For example the array-grid example has a column with an id of 'company'. If you wanted to change the cursor to be a text cursor add this css after the core css is loaded:
HTML Code:
.x-grid3-td-company { cursor: text;}Override the getRowClass
Use a function in the Grid's View and return a class name string.
Code:
gridView = new Ext.grid.GridView({ //forceFit: true, getRowClass : function (row, index) { var cls = ''; var data = row.data; switch (data.SEVERITY) { case 'C' : cls = 'alarmGridCritical' break; case 'M' : cls = 'alarmGridMinor' break; } return cls; } });See example here.
8. How to add click handlers to specific Grid cells?
Add a listener for the Grid's cellclick event. The listener is passed the row and column indexed clicked on. The column index may be used to determine which field was clicked on (Columns may be reordered by the user so using the column index as the field index is unsafe).
A cellclick event handler must find the relevant information like this:
Code:
function(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); // Get the Record for the row // Get field name for the column var fieldName = grid.getColumnModel().getDataIndex(columnIndex); var data = record.get(fieldName);}9. Store is empty even after calling load() on my Store
Store.load() is asynchronous when using remote data (through an HttpProxy, or a ScriptTagProxy).
It returns immediately after the request is sent to the server and continues to process code without waiting. To control postprocessing of returned data, use a callback to the load call, or add listeners to the Store's "load" and "loadexception"] (most problems will be indicated here) events.
PHP Code:
myStore.load();
alert(myStore.getCount());// no way! won't work. the store was just requested, it's not 'back' from the server yet.
//add listener to store's load event:
myStore.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.log('Data Store listener fired (load), arguments:',arguments);
console.log('Store count = ',store.getCount());
}
,scope:this
}
myStore.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.log('Data Store listener fired (load), arguments:',arguments);
console.log('Store count = ',store.getCount());
}
,scope:this
}
10. Make grid resize with the window
Place the Grid in a "Viewport container" with the configuration of layout:'fit'
For more on layout issues see this thread.
11. Updating a cell (actually the store)
You actually update the store, not a cell:
Code:
var record = editorGridPanel.getStore().getAt(row);record.set('fieldname', newValue);If this Field is an editor, you can collect the Grid cell's value in a beforeedit event handler (see Listeners in following post). See getSelectedCell in API docs.
If using mouseover:
Code:
grid.on("mouseover", function(e, t) { var row; if((row = this.findRowIndex(t)) !== false){ var record = this.store.getAt(row); var id = record.get('Id'); }}, grid);12. How to reload a Grid from a different URL?
Usually, this question means that different '''parameters''' need to be passed to the same server script. The answer is "Do not embed parameters in the DataProxy's URL"
To add parameters to a Grid's server requests add a listener for its Proxy's beforeload event:
Code:
var proxy = new Ext.data.HttpProxy({ url: '/DoSearch.php'});// Add the HTTP parameter searchTerm to the requestproxy.on('beforeload', function(p, params) { params.searchTerm = searchValue;});13. XML Issues
Many people will recommend you use JSON.
Xml has a huge performance penalty associated with it, and JSON is just plain simpler (and therefore much easier to manipulate).
If there is a specific requirement for xml, check if your server setting the right content-type for the xml (Response.ContentType = "text/xml"). For example have the server return the correct mime type for the XML document:
Code:
<mime-mapping> <extension>xml</extension> <mime-type>text/xml</mime-type> </mime-mapping>14. Grid still shows records even when it should be empty
Check that you are return an empty array and not null in the response from your server.
The store will get updated with an empty array, thus showing nothing.
If you return null then the grid doesn't get updated (the store's data has not changed).
15. How to debug the response going into JsonReader
In firebug, go to ext-all-debug.
find "getJsonAccessor: function(){"
Scroll up a bit to read, set a breakpoint there, and reload the page
16. How to drag/drop/reorder rows?
See this thread
17. Horizontal scrolling issues
If you have a GridPanel with horizontall scroll and when go to another page the horizontal scroll reverts to the left side position you can try this code to prevent it from scrolling back:
Code:
grid.getStore().on({ beforeload: function() { this.prevScrollState = this.getScrollState(); this.prevScrollState.top = 0; }, load: function() { this.restoreScroll(this.prevScrollState); remove this.prevScrollState; }, scope: grid.getView()});18. Mixing fixed width and variable width columns
Imagine a scenario where there are columns 'Salutation' and 'Name' which needs to be at 50px width each, and a column 'notes' which should be sized to the grid's size.
Solution 1:
Set a width for 'Salutation' and 'Name'.
Give an "id" to the 'notes' column and use the autoExpandColumn config option of the GridPanel. The Array grid example in the examples/grid/array-grid.js does just this. Price, Change, % Change, and Last Updated are all fixed width. Company will stretch to fit the rest of the size available. Notice that it has an "id" NOT a dataIndex. The autoExpandColumn config only takes id's, not dataIndex's.
Solution 2:
Try: viewConfig:{forceFit:true}
19. How to hide a column
Navigate to: http://extjs.com/deploy/dev/examples/grid/array-grid.html
In Firebug's console type: Ext.getCmp('ext-comp-1001').getColumnModel().setHidden(0, true)
Ext.getCmp('ext-comp-1001') returns the GridPanel object.
getColumnModel() gets it's column model.
setHidden(0, true) hides column 0 (0 = the first column).
20. How to wrap contents within a cell of a fixed width grid column?
The goal is to have the contents of a cell automatically wrap into a fixed defined width according to the column definition instead of having to manually drag the column width to expand the column.
Give the column you want to wrap an ID:
http://extjs.com/deploy/dev/docs/?class=Ext.grid.ColumnModel&member=id
Then define CSS classes like this:
Code:
td.x-grid3-td-<your id> { overflow: hidden;}td.x-grid3-td-<your id> div.x-grid3-cell-inner { white-space: normal;}If you want to apply this to the entire grid apply it to the basic td class of the grid.
21. How to add a column with tools for each record?
Approach 1
Given the array grid example in the docs and your packaged download...
http://extjs.com/deploy/dev/examples/grid/array-grid.js
Add an extra column to the column model definition and a custom renderer.
Code:
{header: "Controls", width: 60, sortable: false, renderer: function() { return '<div class="controlBtn"><img src="../shared/icons/fam/cog_edit.png" mce_src="../shared/icons/fam/cog_edit.png" width="16" height="16" class="control_edit"><img src="../shared/icons/fam/folder_go.png" mce_src="../shared/icons/fam/folder_go.png" width="16" height="16" class="control_go"></div>';}, dataIndex: 'company'}Then you would setup an event handler on the click event.
PHP Code:
grid.on('click', function(e) {
var btn = e.getTarget('.controlBtn');
if (btn) {
var t = e.getTarget();
var v = this.view;
var rowIdx = v.findRowIndex(t);
var record = this.getStore().getAt(rowIdx);
var control = t.className.split('_')[1];
switch (control) {
case 'edit':
console.log('edit this record - ' + record.id);
break;
case 'go':
console.log('go to this record - ' + record.id);
break;
}
}
}, grid);
Add the following CSS rule in array-grid.html to give some padding and change the cursor.
HTML Code:
<style> .controlBtn img { padding-left: 4px; cursor: pointer; } </style>Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.
Approach 2 utilizes a plugin as discussed here:
PHP Code:
// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* RowAction plugin for Ext grid
*
* Contains renderer for an icon and fires events when icon is clicked
*
* @author Ing. Jozef Sakalos <jsakalos at aariadne dot com>
* @date December 29, 2007
* @version $Id: Ext.ux.grid.RowAction.js 126 2008-01-31 03:33:50Z jozo $
*
* @license Ext.ux.grid.RowAction is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.RowAction
* @extends Ext.util.Observable
*
* Creates new RowAction plugin
* @constructor
* @param {Object} config The config object
*
* @cfg {String} iconCls css class that defines background image
*/
Ext.ux.grid.RowAction = function(config) {
Ext.apply(this, config);
/**
* @class Ext.ux.grid.RowAction
* @extends Ext.util.Observable
*
* Creates new RowAction plugin
* @constructor
* @param {Object} config The config object
*
* @cfg {String} iconCls css class that defines background image
*/
Ext.ux.grid.RowAction = function(config) {
Ext.apply(this, config); this.addEvents({
/**
* @event beforeaction
* Fires before action event. Return false to cancel the subsequent action event.
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
beforeaction:true
/**
* @event action
* Fires when icon is clicked
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
,action:true
});
Ext.ux.grid.RowAction.superclass.constructor.call(this);
};
Ext.ux.grid.RowAction.superclass.constructor.call(this);
}; Ext.extend(Ext.ux.grid.RowAction, Ext.util.Observable, {
header:''
,sortable:false
,dataIndex:''
,width:20
,fixed:true
,lazyRender:true
,iconCls:''
// private - plugin initialization
,init:function(grid) {
this.grid = grid;
var view = grid.getView();
grid.on({
render:{scope:this, fn:function() {
view.mainBody.on({
click:{scope:this, fn:this.onClick}
});
}}
});
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
retval += this.style ? ' style="' + this.style + '"' : '';
retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
retval += '> </div>';
return retval;
}.createDelegate(this);
}
} // eo function init // override for custom processing
// private - plugin initialization
,init:function(grid) {
this.grid = grid;
var view = grid.getView();
grid.on({
render:{scope:this, fn:function() {
view.mainBody.on({
click:{scope:this, fn:this.onClick}
});
}}
});
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
retval += this.style ? ' style="' + this.style + '"' : '';
retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
retval += '> </div>';
return retval;
}.createDelegate(this);
}
} // eo function init // override for custom processing
,getIconCls:function(record, row, col) {
return this.boundIndex ? record.get(this.boundIndex) : this.iconCls;
} // eo function getIconCls
// private - icon click handler
,onClick:function(e, target) {
var record, iconCls;
var row = e.getTarget('.x-grid3-row');
var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell')); if(
,onClick:function(e, target) {
var record, iconCls;
var row = e.getTarget('.x-grid3-row');
var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell')); if(false !== row && false !== col) {
record = this.grid.store.getAt(row.rowIndex);
iconCls = this.getIconCls(record, row.rowIndex, col);
if(Ext.fly(target).hasClass(iconCls)) {
if(false !== this.fireEvent('beforeaction', this.grid, record, row.rowIndex)) {
this.fireEvent('action', this.grid, record, row.rowIndex, e);
}
}
}
} // eo function onClick
});
// eof
// eof
22. How to center elements in a toolbar?
PHP Code:
myToolbar.getEl().child("table").wrap({tag:'center'})
PHP Code:
var t = myGridPanel.getBottomToolbar().el;
var c = t.createChild("<center></center>");
c.appendChild(t.child("table"));
23. How to delete all selected rows?
PHP Code:
Ext.each(contactgrid.getSelectionModel().getSelections(), contactgrid.getStore().remove, contactgrid.getStore());
PHP Code:
tbar: [
{
text: 'Delete Contacts',
iconCls:'remove',
handler : function(t){
console.log(' inside "Delete Contacts" with arguments = ',arguments);
grid = contactgrid;
//get the store associated with the grid:
store = grid.getStore();
//get the store associated with the grid:
store = grid.getStore(); //returns array of record objects for selected rows (all info for row)
var selections = grid.selModel.getSelections();
console.log(' grid = ',grid);
console.log(' selections = ',selections); var n = selections.length;
for(var i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
n = selections.length;
for(var i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
i = 0; i < n; i++){
console.log(' Number Selected =',n);
console.log(' selections =',selections);
console.log(' store before remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
store.remove(selections[i]);
console.log(' store after remove attempt #',i,': ',store,' store has ',store.getCount(),' records');
}//end for
}//end handler
}//end Delete Contacts
24. Issues with paging or total record count
Paging is typically handled on the server side.
The idea is to reduce the amount of data exchanged with the client.
Configure the store and reader objects accordingly, especially the reader's totalProperty (Json reader) / totalRecords (XML reader) property.
Pass the paging requirements to the server when the store is loaded.
PHP Code:
bbar: new Ext.PagingToolbar({
pageSize: 25, //when you go to next page I believe it uses this number
...
})
store.load({params:{start: 0, limit: 25}});//pass params for first page load
//or if you want to use autoLoad in the store's configuration:
autoLoad: {params:{start: 0, limit: 25}}
autoLoad: {params:{start: 0, limit: 25}}
Check using Firebug what all is sent out in the POST and retrieve that information server side to generate the necessary sql to return the appropriate data. Something to the effect of:
PHP Code:
/* By specifying the start/limit params in ds.load
* the values are passed here
* if using ScriptTagProxy the values will be in $_GET
* if using HttpProxy the values will be in $_POST (or $_REQUEST)
* the following two lines check either location, but might be more
* secure to use the appropriate one according to the Proxy being used
*/
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
//check for the 'sort' and 'dir' in the POST array.
$sortDir = isset($_POST['dir']) ? $_POST['dir'] : 'ASC';//default to ASC if not set
$sortBy = isset($_POST['sort']) ? $_POST['sort] : 'company';//default to company name if not set
$sql_count = 'SELECT * FROM ' . $table;
$sql = $sql_count . ' ORDER BY ' . $sortBy. ' ' . $sortDir . ' LIMIT ' . $start . ', '. $end;
$result_count = mysql_query($sql_count);
$rows = mysql_num_rows($result_count);
SELECT * FROM ' . $table;
$sql = $sql_count . ' ORDER BY ' . $sortBy. ' ' . $sortDir . ' LIMIT ' . $start . ', '. $end;
$result_count = mysql_query($sql_count);
$rows = mysql_num_rows($result_count);
25. Get a record from the grid by row index
Code:
var record = grid.getStore().getAt(rowIndex);26. Load data to a grid from two diferent server calls/stores
Adding records from Store 2 to Store 2.
PHP Code:
var store2 = new Ext.data.Store({
...
});
var store1 = new Ext.data.Store({
...
listeners: {
load: function(store) {
store2.addRecords({records: store.getRange()},{add: true});
}
}
});
Using records from Store 2 with Store 1.
For example, the first data col comes from Store 1 and the data from Store 2 forms cols 2 and 3. You can use a renderer that finds the data in the second store if the 'other' columns are just 'lookup' data, e.g.:
PHP Code:
var store1 = new Ext.data.Store({
...,
fields: ['field1', 'field2']
});
var store2 = new Ext.data.Store({
...
id: 'field2',
fields: ['field2', 'fieldA', 'fieldB']
}); var renderA = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldB') : '';
}
var columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
renderA = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldB') : '';
}
var columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
27. "Auto size" columns to the largest element in them
Option 1
Option 2
28. Disable editing of particular rows
Use beforeedit and return false to stop the edit
PHP Code:
var grid = new Ext.grid.EditorGridPanel({
...
isCellEditable: function(colIndex, rowIndex) {
var field = this.getColumnModel().getDataIndex(colIndex);
if (field == 'value') {
var record = this.getStore().getAt(rowIndex);
if (!record.get('enable_edit').getValue()) { //enable_edit is field in record
return false;//return false to deny editing
}
}
return Ext.grid.EditorGridPanel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
});
Option/Example 2
PHP Code:
myColumnModel.isCellEditable = function(colIndex, rowIndex){ return !someBooleanStoredSomewhere; };
Option/Example 3
PHP Code:
this.on('beforeedit', Comment.Methods.commentUpdateCheckPermission);
commentUpdateCheckPermission : function (commentData) {
if (cds.data.items[commentData.row].data.user_ID != Ext.util.Format.uppercase(VMOC.myUUID)) {
Ext.MessageBox.alert('Permission denied', 'You do not have permission to edit this comment.');
cds.rejectChanges();
commentData.cancel = true;
}
}
commentUpdateCheckPermission : function (commentData) {
if (cds.data.items[commentData.row].data.user_ID != Ext.util.Format.uppercase(VMOC.myUUID)) {
Ext.MessageBox.alert('Permission denied', 'You do not have permission to edit this comment.');
cds.rejectChanges();
commentData.cancel = true;
}
}
29. What is difference between contentEl, applyTo and renderTo?
For most use cases you should be able to use the contentEl config option with a div in your markup with a css class of x-hidden.
contentEl - This config option is used to take existing content and place it in the body of a new panel. It is not going to be the actual panel itself. (It will actually copy the innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.
applyTo - This config option allows you to use pre-defined markup to create an entire Panel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements must be in the correct order/hierarchy. Any components which are not found and need to be created will be autogenerated.
renderTo - This config option allows you to render a Panel as its created. This would be the same as saying myPanel.render(ELEMENT_TO_RENDER_TO);
30. Dirty Record / Red Flag (modifying, etc.)
To disable "dirty cell mark" for a record field. Use the following line when you modify a cell you do not wish to have a "dirty" marker. This will get the record to think that this cell has not been modified without having to commit the entire record.
PHP Code:
record.modified[this.dataIndex] = undefined; // will prevent a "dirty" flag to be displayed on the check box
To remove the red triangle only from some records (not all), hook into the grid's validateedit event and cancel it if the edit occurred on a targeted row, then set the field's new value in the Record directly:
PHP Code:
grid.on('validateedit', function(e) {
var myTargetRow = 6;
if (e.row == myTargetRow) {
e.cancel = true;
e.record.data[e.field] = e.value;
}
})
e.row == myTargetRow) {
e.cancel = true;
e.record.data[e.field] = e.value;
}
})
Change the cell style back to the one without the little red corner and update the data store with the new value (Does not execute an XHR to send/commit data to the server.)
PHP Code:
grid.on('afteredit', afterEdit, this );
function afterEdit(val) {
val.record.commit();
};
Change the CSS to never show the dirty flag:
PHP Code:
.x-grid-dirty-cell {
background-image:none;
}
Or:
PHP Code:
<style type="text/css">
.x-grid3-td-[id-of-column] {background-image:none!important;}
</style>
发表评论
-
前台编码验证
2009-12-25 11:35 1036listeners:{ 'blur' : func ... -
Ext中获取节点对象的方法分析
2009-12-24 14:46 1678Ext中提供了三个方法 ... -
闭包q
2009-12-24 14:25 1404最近在网上查阅了不少Javascript闭包(closure) ... -
encodeURI
2009-12-24 14:14 1504encodeURI 方法 将文本字符串编码为一个有效的统一资源 ... -
extjs date compare
2009-12-24 13:39 1436//生效日期 var shengxiaodate=fs ... -
js调试工具
2009-12-24 09:44 2050http://onlyaa.com/html/idehelp/ ... -
Ext.fly() 为空
2009-12-23 16:33 1569function yjczMaterial(){ qr ... -
根据数据库里面字段的状态值对应不同的按钮
2009-10-19 14:45 1079今天上午没有完成那个随着选中与未选中的状态来有与之对应的按钮的 ...
相关推荐
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...
ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...
ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...
ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...
ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...
EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...
ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...
【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...
EXTJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量...
ExtJS 4.2 Desktop 拓展是一个用于构建桌面样式的Web应用程序的框架,它提供了丰富的用户界面组件和交互效果。这个拓展是基于ExtJS 4.2版本,一个非常强大的JavaScript库,用于创建数据驱动、富客户端的Web应用。在...
### Extjs6示例中文版知识点详解 #### 1. ExtJS6简介及学习动机 ExtJS6是一款功能强大的客户端JavaScript框架,适用于构建复杂的企业级Web应用程序。由于中文学习资源较少,作者决定翻译一本名为《ExtJS6 By ...
ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...
ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...
ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在ExtJS中,图标(icon)是用于增强UI视觉效果和用户体验的重要元素。这些图标通常用在按钮、菜单项、工具...
EXTJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件化的用户界面元素和丰富的交互功能。基于EXTJS 的在线EXCEL编辑器,是利用EXTJS的强大功能来实现对Excel文件的在线创建、...
ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一套完整的组件模型、数据绑定机制以及强大的布局管理器,使得开发者能够创建功能丰富的、交互性强的用户界面。3.3版本虽然...
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 如皮肤文件:xtheme olive zip下载 把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...