PDA

View Full Version : Paging toolbar is display with malformed input field



StaraBieda
27 Mar 2014, 6:12 AM
Using ExtJS 4.2.1 I added a paging toolbar to a grid panel. Everything works fine after fixing the SQL queries. However the toolbar is rendered malformed. The page input field is far to small and has some weird frames around it. With a little luck I can type something into the field but I can't read anything. I see this with both default theme and gray theme and it is the same for Chrome and Firefox. This is how it looks:

48468
I used a default toolbar, default panel and default themes. Any idea about this?

scottmartin
27 Mar 2014, 8:06 AM
Do you see this with our online example?
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/paging.html

If not, then we would need to see some code.

StaraBieda
27 Mar 2014, 11:14 AM
No, your online example looks fine.

This is a demo code I created to reproduce the problem. But thats an easy task, the problem seems totally independent from the used data store. It looks always the same no matter if I use a working store or not:


var dummyStore = Ext.create('Ext.data.Store', {
storeId: 'DummyStore',
pageSize: 1,
fields: [ 'Data' ],
data: [ { Data: 0 } ]
});

var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
store: dummyStore,
dock: 'bottom',
displayInfo: true
});

var panel = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: dummyStore,
columns: [ { text: 'Data', dataIndex: 'Data', flex: 1 } ],
height: 550,
width: 620,
renderTo: 'decktech_gui',
dockedItems: [ pagingToolbar ]
});

Those are my includes:

<link rel='stylesheet' id='extjsstyle-css' href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css?ver=3.8.1' type='text/css' media='all' />
<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-dev.js'></script>

Later I added the following one too (based on a stackexchange thread) and it improved the appearance a little (the broken frames are a little more centric) but still no visible number in the input field and still the bar is far too high:


<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-theme-neptune.js'></script>

UPDATE: If I copy the essential code and the includes into a blank HTML file, everything is displayed properly. Could be this is a problem that arrises due to something that Wordpress adds to the page. In the moment I have no clue how to tackle such a problem.

StaraBieda
28 Mar 2014, 2:49 AM
Using Chrome developer tools I compared the HTML representations of the input field table of my broken toolbar and your example. There are differences. The broken input field sub tree has:
"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"

I also checked the CSS rules. I could identify one rule in the wordpress twentyfourteen theme that makes the outer frame visible:


table,
th,
td {
border: 1px solid rgba(0, 0, 0, 0.1);
}
This is part of the reset section of the theme. When disabling it, the frame disappears.

Another rule is this one:


.entry-content td,
.comment-content td {
padding: 8px;
}
It prevents the input field from showing correctly. After disabling this only the vertical positions of all items in the bar must be fixed to make the bar look correctly.

Any idea what the root cause of these effects is?

StaraBieda
29 Mar 2014, 12:59 AM
I am still stuck. I would really appreciate some advice. It would be shame if I could not use ExtJS due to such a style glitch.

scottmartin
29 Mar 2014, 8:17 AM
href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css


I see you have the neptune theme CSS? Is that your intent, as the screenshot shows classic theme.

StaraBieda
29 Mar 2014, 9:32 AM
That's because I tried out multiple of the themes included with ExtJS hoping that one of them would fix the issue. The screenshot was done earlier, before I tried another theme and before I posted code. But that doesn't matter, the problem is the same for all themes.

What is the root problem here? How can it be fixed? I did not expect that a low level CSS rule (like the reset rule I posted above) could advance to an ExtJS element in such a harmful way.

I tried to workaround this by patch CSS rules but even this didn't work completely. I was able to make the input field look fine but still the height of the bar and the vertical positions of the widgets where wrong.

Actually this problem is a showstopper for my ExtJS pilot project.

scottmartin
29 Mar 2014, 10:51 AM
I suspect your additional Worpress styles (or another) are playing havoc as this should not be happening out of the box.

Attached is a quick example that should load a grid with paging.

You will need to change the path to your ExtJS path in the html file

48482

StaraBieda
29 Mar 2014, 1:04 PM
Your example works fine (without wordpress).

I am using Wordpress out of the box here (no other styles), so you are probably right... those are Wordpress styles that are involved in the problem.

But does it mean ExtJS can not be used with Wordpress?

Is there no way to improve the ExtJS styles so they are not affected by the WP styles?

scottmartin
29 Mar 2014, 1:32 PM
You will most likely need to find a WP plugin that allows them to work together. Something like:
http://wordpress.org/support/plugin/wp-extjs
http://www.presscoders.com/2011/06/wordpress-integration-with-ext-js-4/

I would also inspect the grid when in WP and see what style is stepping all over the pagingtoolbar.

Scott.

StaraBieda
29 Mar 2014, 2:17 PM
The problem is that in fact I am developing a plugin that should show ExtJS controls by its own. So another plugin doesn't help,

Anyway I will check out the first link so maybe I can learn from it (however that plugin is very old so it will not cover current Wordpress and ExtJS versions).

I also had a look at the second link. But I do not understand. In which way could it help me?

Regarding styles... I already checked that. Please see posting #4 above. I could patch the style sheets (making the input field look good) but I was not able fix the positioning of paging-bar widgets. After fixing the styles they still where located at the wrong vertical position and the toolbar was still far to high. Maybe I could patch this in some way too but I have a very bad feeling about botching around by that extend.

For continuing with ExtJS (which impressed me very much) I should have a reliable solution that prevents me from repeatedly patching the styles creating an increasing mess.