1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    domurtag is on a distinguished road

      0  

    Default GridPanel width

    GridPanel width


    I'm using Ext JS 2.3.0 and have created the search dialog shown below.

    grid-before.jpg

    The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):

    Attachment 0grid-after.jpg

    How can I make the column display correctly when it's shown initially? The relevant code is shown below:

    Code:
        
        FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {    
            constructor: function() {
        
                var queryTextField = new Ext.form.TextField({
                    hideLabel: true,
                    width: 275,
                    colspan: 2,
                });
                var self = this;
        
                // the search query panel
                var entitySearchForm = new Ext.form.FormPanel({
                    width: '100%',
                    frame: true,
                    layout:'table',
                    layoutConfig: {columns: 3},
                    items: [
                        queryTextField,
                        {
                            xtype: 'button',
                            text: locale["dialogSearch.button.search"],
                            handler: function() {
                                var queryString = queryTextField.getValue();
                                self._doSearch(queryString);
                            }
                        }
                    ]
                });
        
                // the search results model and view
                this._searchResultsStore = new Ext.data.SimpleStore({
                    data: [],
                    fields: ['name']
                });
        
                var colModel = new Ext.grid.ColumnModel([
                    {
                        id: 'name',
                        header: locale['dialogSearch.column.name'],
                        sortable: true,
                        dataIndex: 'name'
                    }
                ]);
        
                var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
        
                this._searchResultsPanel = new Ext.grid.GridPanel({
                    title: locale['dialogSearch.results.name'],
                    height: 400,
                    stripeRows: true,
                    autoWidth: true,
                    autoExpandColumn: 'name',
                    store: this._searchResultsStore,
        
                    colModel: colModel,
                    selModel: selectionModel,
                    hidden: false,
                    buttonAlign: 'center',
                    buttons: [
                        {
                            text: locale["dialogSearch.button.add"],
                            handler: function () {
                                entitySearchWindow.close();
                            }
                        },
                        {
                            text: locale["dialogSearch.button.cancel"],
                            handler: function () {
                                entitySearchWindow.close();
                            }
                        }
                    ]
                });
        
                // a modal window that contains both the search query and results panels
                var entitySearchWindow = new Ext.Window({
                    closable: true,
                    resizable: false,
                    draggable: true,
                    modal: true,
                    viewConfig: {
                        forceFit: true
                    },
                    title: locale['dialogSearch.title'],
                    items: [entitySearchForm, this._searchResultsPanel]
                });
        
                entitySearchWindow.show();
            },
        
            /**
             * Search for an entity that matches the query and update the results panel with a list of matches
             * @param queryString
             */
            _doSearch: function(queryString) {
        
                def dummyResults = [['foo'], ['bar'], ['baz']];       
                self._searchResultsStore.loadData(dummyResults, false);
            }
        });

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    so get rid of autoWidth and autoExpandColumn on your grid definition and then add

    Code:
    viewConfig: {
      forceFit: true
    }

    profit?
    Wes

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    domurtag is on a distinguished road

      0  

    Default


    Quote Originally Posted by darthwes View Post
    profit?
    Thanks for the suggestion, but unfortunately it didn't make any difference.

  4. #4
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    Works when I try it over here. What browser and Ext version are we talking? CNR, works over here.
    Wes

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    domurtag is on a distinguished road

      0  

    Default


    sorry wes, you're right, it does work, thanks a lot

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi