Results 1 to 3 of 3

Thread: GridPanel + JsonStore + BufferView + Cell Renderers

  1. #1
    Sencha User
    Join Date
    Jun 2007
    Location
    Minneapolis, MN
    Posts
    12

    Default GridPanel + JsonStore + BufferView + Cell Renderers

    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

  2. #2
    Sencha User
    Join Date
    Jun 2007
    Location
    Minneapolis, MN
    Posts
    12

    Default

    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?

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Location
    Minneapolis, MN
    Posts
    12

    Default

    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.

    Code:
    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. */
        }
    });

Similar Threads

  1. BufferView not saving my InnerHTML on a cell
    By blay in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 3 Dec 2010, 7:35 AM
  2. Did you know: cell renderers get passed more than just value
    By bitdifferent in forum Community Discussion
    Replies: 1
    Last Post: 6 Sep 2007, 11:49 PM
  3. best practice for combined/cumulative/multiple cell renderers in a grid
    By jonnycattt in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 24 Aug 2007, 4:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •