PDA

View Full Version : GridPanel + JsonStore + BufferView + Cell Renderers



exquisitus
18 Apr 2011, 9:08 AM
Hi All,

I need some direction here. I have a requirement to implement a scrollable data grid/table which renders its rows on-demand when each row comes into view. Core reason is that detailed information for each row has to be retrieved from a different system which exhibits high latency calls. The end result with out on-demand rendering would be long page loads. And pagination is not an option. For some reason the business folks strongly dislike pagination. Another requirement is each row must always show zero to two dropdown lists depending on what is contained in the detailed information. Visible rows will be limited to 10 with a maximum of 100 rows allowed.

So I found the buffered data grid example which seems to be a perfect solution. I went ahead and setup a page by putting together the following components: JsonDataStore, GridPanel, BufferView

I used a cell renderer for each column. In column #2 and #3 a drop down list is rendered only when a certain condition is met based on the detail information. I have everything functioning pretty good with one weird exception.

The weird thing is that the selection model is messing up the focus behavior for the dropdown lists. If a dropdown is clicked on, the list appears, but then disappears when the row changes color to indicate a selected row. After that I have to re-click the dropdown box again to get the list to appear again and then I can select an item from the list.

I haven't been able to find an example where each row is rendered using a cell render and each row appears to always be in edit mode. So perhaps I am on my own in what I am attempting to do or it could be I am going about the wrong way?

Please, someone, advise me. Any help is greatly appreciated.

Sincerely,

Sam

exquisitus
19 Apr 2011, 7:14 AM
An update - this is only happending in IE. I have a hunch that when the row becomes selected the row receives focus, thus, the dropdown lists loses focus. Can anyone confirm this?

exquisitus
19 Apr 2011, 1:51 PM
Okay I solved my own problem. I wrote up a very simple custom selection model that does not do any selection. I did try hooking into the RowSelectionModel's beforerowselect event. The row wasn't being selected but still for some reason the dropdowns were still losing focus. All my problems may surround the fact that I am not using the editmode behavior. In my usage, all rows are presented as if they are always in edit mode after they have been rendered on-demand when they come into view. I guess in my usage it is okay since the business is maxing it out to 100 rows for the users.

This selection model is named NullSelectionModel. This control extends Ext.grid.AbstractSelectionModel and basically does nothing. See my contribution below.



Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.NullSelectionModel
* @extends Ext.grid.AbstractSelectionModel
* A SelectionModel that selects nothing. Use the NullSelectionModel in cases
* where the behavior of a selection model is not desired. Please take notice
* that the GridPanel control defaults to RowSelectionModel when a selection
* model is not specified. This means specifying null for a selection model
* will not achieve the desired result.
* @constructor
* @param {Object} config
*/
Ext.ux.grid.NullSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, {
constructor: function(config) {
Ext.apply(this, config);
Ext.ux.grid.NullSelectionModel.superclass.constructor.call(this);
},
// private
onEditorKey: function(field, e) {
/* Does nothing. Declared only because the GridPanel control calls this function. */
},
// private
initEvents: function() {
/* Does nothing. Declared only because the GridPanel control calls this function. */
}
});