PDA

View Full Version : Paging Toolbar buttons are not displaying correctly



bradlymathews
25 Mar 2014, 11:19 AM
I have a paging toolbar in the bbar on a grid and everything is functioning correctly, but I am having a display issue.

The first/prev/next/last buttons are only showing up with about 2px of width. If, using Firebug, I edit the CSS of the buttons <a> tag to add a width, the button shows up, so it appears that all of the pieces are there.

I have additional buttons I added in the items config and the mouseover on those is not working. I have a couple of buttons in the tbar of the grid and they are working correctly (the mouseover causes a border to appear around the button text.)

Here is an image showing the effect:


48453

Here is the code that builds the toolbar:

Edit: I tried the neptune skin and the problem goes away. I can't use the neptune skin here, but hopefully it provides a clue.



this.paging_toolbar = Ext.create('Ext.toolbar.Paging', {
displayInfo: true,
refreshText: 'One moment while we get more data...',
emptyMsg: 'No data found',
store: store,
items: [
'-',
'Number of Records per Page: ',
pageSizeCombo,
'-',
'Field to Search: ',
searchTypeCombo,
'Search Value: ',
{
xtype: 'textfield',
name: 'searchValue',
id: 'searchValue'
}, {
xtype: 'button',
text: 'Search',
listeners: {
click: function () {
this.searchValue = Ext.getCmp('searchValue').getValue();
this.paging_toolbar.moveFirst();
this.paging_toolbar.doRefresh();
},
scope: this
}
}, {
xtype: 'button',
text: 'Clear Search',
listeners: {
click: function () {
Ext.getCmp('searchValue').setValue('');
this.searchValue = '';
this.paging_toolbar.doRefresh();
},
scope: this
}
}
],
listeners: {
scope: this,
'change': function () {
if (this.paging_toolbar.cursor > this.paging_toolbar.store.totalLength) {
this.paging_toolbar.moveFirst();
}
}
}


});

scottmartin
25 Mar 2014, 12:29 PM
I suspect that you are crowding the bar with your extra text. You may have to set a width in Ext.toolbar.Paging :: getPagingItems as shown in the numberfield:



width: me.inputItemWidth,

bradlymathews
25 Mar 2014, 2:09 PM
Scott,

I had that idea that the added items are crowding the bar, but if I make the browser wide enough to hold everything before I load the page, it does not help.

I just tried using the inputItemWidth config, and that makes no difference, even if I use something ridiculous like 500.

I do not understand how to use getPagingItems as you suggest or where I should be putting the width: me.inputItemWidth.

It seems like there is some problem with the css theme, I have had weird layout problems trace back to that in the past, but it affected the whole page, not part of the page as here. But I am at a loss in coming up with a debugging tactic to help me find it.

Thanks,
Brad

scottmartin
25 Mar 2014, 2:45 PM
I was talking about overriding .. and the config was internal to the class .. so it would not help on the created instance.

I tried a quick test and I do not see this happening. You can run code in our fiddle:
https://fiddle.sencha.com/#home



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "change":100 },
{ 'name': 'Bart', "email":"[email protected]", "change":-20 },
{ 'name': 'Homer', "email":"[email protected]", "change":23 },
{ 'name': 'Marge', "email":"[email protected]", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Some Field',
width: 200
},
{
xtype: 'textfield',
fieldLabel: 'Other Field',
width: 200
}
]
}]
});

});

bradlymathews
26 Mar 2014, 11:53 AM
Ok, so I tried a bunch of stuff, detailed below in the order I did it. The bottom line seems to be the 'plain' ui classes getting applied instead of the 'default' classes. If I copy a button's classes from the jsfiddle version to mine (using firebug), it fixes. So how am I getting the 'plain' ui instead of the 'default' ui?

Debugging steps:

I tried both adding it to the dockedItems instead of bbar and instantiating it inline like you do in your example. Nether changed the outcome.

I inspected the DOM/CSS of both my page and the jsFiddle and I noticed the following differences:

On my page, the Span which hold the .x-tbar-page-next tag (which holds the GIF) has a computed right of -19 and a bottom of -1. These both 0 in the jsfiddle version as well as my own page if using the neptune theme. This is true of all of the nav buttons.

My page is using .x-btn-plain-toolbar-small-icon and the jsfiddle is using x-btn-default-toolbar-small-icon. If I use ui: 'default' (which is should be using by default anyway, hence the name) nothing changes.

I also tried moving to 4.2.1 from 4.2 but that did not change anything

I tried removing all other styling from my in case there was a conflict.

When I copy the css classes from the jsfiddle version to my page, the problem is fixed!

Thanks for your help on this!
Brad

bradlymathews
27 Mar 2014, 8:40 AM
Ok, got it figured out and it's a bit of a head slapper.

So I was playing with the Neptune theme and has the css in there this way so I could easily comment/uncomment the lines and it worked:



<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!--<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-active_neptune.css" />-->


But I saw some sample code that also included a .js file like:


<script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>


I commented it out when I went back to the classic theme.


<!--<script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>-->


Well, I completely forgot that this does not actually work to comment out a script tag - I hadn't needed to "comment out" js code for non-compatible browsers this way since the 90's.

So something in the neptune.js file was screwing up the layout. Get rid of it and voila.

It seems like the ext-theme-neptune.js is not even needed for the neptune theme anyway.

- Brad

jfok1972
16 Apr 2014, 4:40 AM
Ext.define('Jfok.module.widget.OwnPaging', {
extend : 'Ext.toolbar.Paging',
alias : 'widget.ownpagingtoolbar',


initComponent : function() {
if (Ext.themeName !== 'neptune')
this.defaultButtonUI = 'default-toolbar'

this.callParent(arguments);

}
});