1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    Baggins is on a distinguished road

      0  

    Default Grid pager toolbar buttons not shown

    Grid pager toolbar buttons not shown


    I try to use paged grid and everything works OK except for the pager buttons. The pager toolbar shows ok, and the part of "Page XX of XX" is shown too, but no forward/next/etc. buttons. I checked with firebug and the HTML is there, the CSS is there and the image URLs are OK, however the images are not shown. Here's how it looks like:



    The html for toolbar is:

    Code:
    <div class="ytoolbar">
    <table cellspacing="0" cellpadding="0" border="0">
    <tbody>
    <tr>
    <td>
    <span id="elgen-4" class="ytb-button" title="First Page" style="-moz-user-select: none;">
    <span class="ytb-button-inner ygrid-page-first" style=""/>
    </span>
    </td>
    etc. for other buttons. The css firebug shows is:

    Code:
    .ygrid-page-first {grid.css (line 229)
    background-image:url(/yui/yui-ext/resources/images/grid/page-first.gif);
    }
    (and I checked this image URL is OK) however still no images shown. The javascript code that creates the grid is:

    Code:
          var sm = new YAHOO.ext.grid.SingleSelectionModel();
            var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
            var colModel = new YAHOO.ext.grid.DefaultColumnModel(this.inColumns);
    		colModel.defaultSortable = true;
    		var dataModel = new YAHOO.ext.grid.JSONDataModel({
    		root: 'data',
    		totalProperty: 'total',
    		fields: this.fields,
    		});
    		dataModel.baseParams = this.zcBaseParams('getData');
    		dataModel.remoteSort = this.serverSort;
    		this.zcParamMap(dataModel.paramMap);
    		// create the Grid
    		dataModel.setDefaultSort(colModel, 0, 'ASC');
    		dataModel.initPaging(location.pathname, this.rows);
     		dataModel.addListener("load", this.onDataReload, this, true);
    		
    		sm.addListener("selectionchange", this.onSelect, this, true);
    		  
            var grid = new YAHOO.ext.grid.Grid(this.id, {
    			dataModel: dataModel,
    			colModel: colModel,
    			selModel: sm,
    			trackMouseOver: true,
    			autoWidth: true,
    			autoHeight: true,
    			});
    		grid.autoSizeHeaders = true;
    		grid.autoSizeColumns = true;
            grid.render();
        	dataModel.loadPage(1);
    		grid.getSelectionModel().selectFirstRow();
    		this.grid = grid;
    The actual data is delivered by AJAX request, and it's OK (see the screenshot - all data is shown). Also, if I change pages by means of external buttons, everything works. Only toolbar buttons are not shown.

    I'm using YUI-ext version 0.33.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      0  

    Default


    Did you change the paths to the background image in the css file? Maybe you have a path resolution problem?

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    Baggins is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    Did you change the paths to the background image in the css file? Maybe you have a path resolution problem?
    I verified the pathes and they are OK. I see HTTP request delivering correct image in Firefox. Also, if I go to firebug and manually change image URL to known correct one (in case I still am missing something somehow) it still does not show the image. Note on the scrrenshow there are tiny blue lines where images should be - so probably it's some size issue (since the image is background, its probably clipped if the cell is too short). However, I'm unable to figure out what causes the issue.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    Baggins is on a distinguished road

      0  

    Default


    I tried some more things with firebug and I saw this
    1. The layout shows the buttons are 4x16 size. I guess they should be 16x16 but explicitly setting width does not help - something is "compressing" them...
    2. If I add some inside the button span, so that it becomes wider, I can see the button image

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Include toolbar.css or yui-ext.css

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    Baggins is on a distinguished road

      0  

    Default


    That helped, thanks a lot.

Similar Threads

  1. IE toolbar buttons spacing issue
    By spatel in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 2 Mar 2009, 8:28 AM
  2. Toolbar Buttons
    By brant in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 12 Aug 2008, 8:56 AM
  3. Toolbar buttons, CSS, mouseover weirdness
    By dbadke in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Mar 2007, 8:34 AM

Thread Participants: 2