Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

Thread: ComboBox using Grid instead of BoundList

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #11
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Correct one problem about grid instead of BoundList, when we click the grid combo box first time, it can't show all the items, it is because combo box refresh doesn't call, since we need listen the 'refresh' event in grid view instead of grid panel.
    the test environment is extjs4 and chrome.


    Ext.define('PVE.form.ComboGrid', { extend: 'Ext.form.ComboBox', requires: [ 'Ext.grid.Panel' ], alias: ['widget.PVE.form.ComboGrid'], // copied from ComboBox createPicker: function() { var me = this, picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({ selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, ownerCt: me.ownerCt, cls: me.el.up('.' + menuCls) ? menuCls : '', store: me.store, displayField: me.displayField, focusOnToFront: false, pageSize: me.pageSize }, me.listConfig, me.defaultListConfig); // NOTE: we simply use a grid panel //picker = me.picker = Ext.create('Ext.view.BoundList', opts); picker = me.picker = Ext.create('Ext.grid.Panel', opts); // hack: pass getNode() to the view picker.getNode = function() { picker.getView().getNode(arguments); };
    me.mon(picker.getView(), {
    refresh: me.onListRefresh,
    scope:me
    });
    me.mon(picker, { itemclick: me.onItemClick,// refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { selectionChange: me.onListSelectionChange, scope: me }); return picker; }});

  2. #12
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Update for the wrong code format, here is the my new code:
    Code:
    Ext.define('PVE.form.ComboGrid', {
        extend: 'Ext.form.ComboBox',
        requires: [
        'Ext.grid.Panel'
        ],
        alias: ['widget.PVE.form.ComboGrid'],
    
    
        // copied from ComboBox 
        createPicker: function() {
            var me = this,
            picker,
            menuCls = Ext.baseCSSPrefix + 'menu',
            opts = Ext.apply({
                selModel: {
                    mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
                },
                floating: true,
                hidden: true,
                ownerCt: me.ownerCt,
                cls: me.el.up('.' + menuCls) ? menuCls : '',
                store: me.store,
                displayField: me.displayField,
                focusOnToFront: false,
                pageSize: me.pageSize
            }, me.listConfig, me.defaultListConfig);
    
    
        // NOTE: we simply use a grid panel
            //picker = me.picker = Ext.create('Ext.view.BoundList', opts);
    
    
        picker = me.picker = Ext.create('Ext.grid.Panel', opts);
    
    
        // hack: pass getNode() to the view
        picker.getNode = function() {
            picker.getView().getNode(arguments);
        };
    
    
        me.mon(picker.getView(), {
            refresh: me.onListRefresh,
            scope:me
        });
            me.mon(picker, {
                itemclick: me.onItemClick,
    //            refresh: me.onListRefresh,
                scope: me
            });
    
    
            me.mon(picker.getSelectionModel(), {
                selectionChange: me.onListSelectionChange,
                scope: me
            });
    
    
            return picker;
        }
    });
    

  3. #13
    Sencha User
    Join Date
    May 2012
    Posts
    20
    Vote Rating
    0
      0  

    Default I need to show 2 grids in drop down typeAhead..pls help

    this thread is very nice, I could get 1 grid in drop down typeahead but I need to show two set of informations in 2 grids.
    kindly help..thanks

    - Vipin Mohit

  4. #14
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default

    I think there is a little bug in the code.

    I think this piece
    Code:
    // hack: pass getNode() to the view
    picker.getNode = function() {
        picker.getView().getNode(arguments);
    }
    should be like this:
    Code:
    // hack: pass getNode() to the view
    picker.getNode = function() {
        picker.getView().getNode.apply(picker.getView(), arguments);
    }
    Otherwise the function will get the arguments array as first parameter (please correct me if I'm wrong).

  5. #15
    Sencha User
    Join Date
    May 2012
    Location
    Ukraine
    Posts
    23
    Vote Rating
    0
      0  

    Default Pagging problem

    Has anybody tried to use pagging for such a grid inside combobox? I have some problem with scrollbar and pagging toolbar that disappear when "next page" or "refresh" buttons are pressed

  6. #16
    Sencha User
    Join Date
    May 2010
    Posts
    28
    Vote Rating
    0
      0  

    Default d is undefined

    Great Work....I have noticed one issue in this ComboGrid that if we will press the down key arrow,its telling d is undefined.When I clicked inside the grid,then only I am able to select the rows in the grid.Otherwise it will show error as d is undefined.Please help me on this issue.

  7. #17
    Sencha User
    Join Date
    Oct 2012
    Location
    Delhi
    Posts
    2
    Vote Rating
    0
      0  

    Default in his way u can filter a tree

    after entering text into text field, you can simply set the value in tree's store proxy property in which u have to configure extraParams property. in this
    proxy :{
    extraParams :{
    test : null
    }
    }
    to get this like this : treepanel.store.proxy.extraParams.test = textfieldvalue
    do this on beforeload event of treepanel
    in this way u can filter a tree.





  8. #18
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Melrose, MA
    Posts
    48
    Vote Rating
    4
      0  

    Default

    Quote Originally Posted by sankarbaluz View Post
    Great Work....I have noticed one issue in this ComboGrid that if we will press the down key arrow,its telling d is undefined.When I clicked inside the grid,then only I am able to select the rows in the grid.Otherwise it will show error as d is undefined.Please help me on this issue.
    You need to override the Combo's onExpand method and replace the BoundListKeyNav implementation with one thats Grid or Tree friendly.

  9. #19
    Sencha User
    Join Date
    May 2012
    Location
    Ukraine
    Posts
    23
    Vote Rating
    0
      0  

    Default XTemplate for BoundList

    Hello,
    you can also customize BoundList using XTemplate so that it can be like a grid. All functionality of BoundList will still be present (keys support, pagging, selection etc.)
    Example of xtemplate:
    Code:
    myCombobox.tpl = new Ext.XTemplate('<table class="x-grid-table" width="100%" >',
        '<tr class="x-grid-row">',
            '<th><div class="x-column-header x-column-header-inner">' + column1Name + '</div></th>',
            '<th><div class="x-column-header x-column-header-inner">' + column2Name + '</div></th>',
        '</tr>',
        '<tpl for=".">',
            '<tr class="x-boundlist-item">',
                '<td><div class="x-grid-cell x-grid-cell-inner">{' + property1Name + '}</div></td>',
                '<td><div class="x-grid-cell x-grid-cell-inner">{' + property2Name + '}</div></td>',
            '</tr>',
        '</tpl>',
    '</table>');
    Unfortunately such 'fake grid' doesn't allow column headers to stay when BoundList is scrolled down and up. Also, there is no grid's column sorting.

  10. #20
    Sencha User
    Join Date
    Feb 2013
    Posts
    31
    Vote Rating
    0
      0  

    Default

    If this is so "simple", then how do you add a grid/tree panel as picker that properly handles key events?

    Just overriding createPicker() results in a grid panel whose rows can only be selected with the mouse

Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Replies: 3
    Last Post: 9 May 2011, 1:23 AM
  2. [CLOSED] Combobox in GXT 2.1
    By amotamed in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 6 Jan 2010, 5:06 AM
  3. [OPEN] [2.2][DUP][CLOSED] ComboBox in IE
    By JamesMa in forum Ext 2.x: Bugs
    Replies: 3
    Last Post: 28 Sep 2008, 4:28 AM
  4. Replies: 2
    Last Post: 20 Oct 2007, 7:50 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
  •