PDA

View Full Version : Button Problem



Mairym13
20 Jul 2009, 2:28 AM
Hello,
I have encountered a few problems while passing from extjs 2.2 to extjs 3.0. first of all, I have lost all background color and border of my buttons (they are normal-type buttons, only text). I have tried many ways to redefine them, but every attempt failed.
I have already posted my problem here with much more details:
http://www.developpez.net/forums/d77...a/#post4497780 (http://www.developpez.net/forums/d779997/webmasters-developpement-web/javascript/bibliotheques-frameworks/ext-js/problemes-extjs-2-2-vers-extjs-3-0-a/#post4497780)
but no one could help.

Do you have an idea of how I could correct my problem?

Thanks a lot.

mystix
20 Jul 2009, 2:37 AM
Hello,
I have encountered a few problems while passing from extjs 2.2 to extjs 3.0. first of all, I have lost all background color and border of my buttons (they are normal-type buttons, only text). I have tried many ways to redefine them, but every attempt failed.
I have already posted my problem here with much more details:
http://www.developpez.net/forums/d77...a/#post4497780 (http://www.developpez.net/forums/d779997/webmasters-developpement-web/javascript/bibliotheques-frameworks/ext-js/problemes-extjs-2-2-vers-extjs-3-0-a/#post4497780)
but no one could help.

Do you have an idea of how I could correct my problem?

Thanks a lot.

refer to point 5 of
http://extjs.com/forum/showthread.php?p=338277#post338277

you simply need to inspect the new markup in Firebug and adjust your css accordingly.

Mairym13
20 Jul 2009, 4:07 AM
Thank you for such a fast reply. My css was (for the button part):

input
[ type = 'submit' ], input [ type = 'button' ] {
background: #4477AA;
color: white;
margin: 5px;
border-color: gray;
width: 100px
}

I thought you ment that I had to do

input
[ type = 'submit' ], input [ type = 'BoxComponent' ] {
background: #4477AA;
color: white;
margin: 5px;
border-color: gray;
width: 100px
}

but I doesn't seem to work. I checked the api but it didn't help (I am working on it since last thursday and I still have nothing). Sorry if I am a bit long to understand, but I am quite new in programming and it is my first experience with EXT js. (newbie?) (in addition to that, my english level isn't really good ;) )

Condor
20 Jul 2009, 4:14 AM
1. IE6 doesn't support css attribute selectors, so I wouldn't recommend using them!

2. The css for buttons in Ext 3 changed completely. I suggested you reexamine the DOM elements and css rules used to render a button.

Mairym13
20 Jul 2009, 5:12 AM
Thank you for your interrest in my problem, Condor,

But I am kind of lost here (sorry). You say : The css for buttons in Ext 3 changed completely. I suggested you reexamine the DOM elements and css rules used to render a button.

I know that there is an 'ext-all.css' in my project, which contains all .css except themes. And also a theme.css (which contains the code I posted last time). I believe the second one was created by the former developper of my program because I do not find any equivalent in the ext js 3.0 files. It is also placed in a different folder (not ext).

I didn't know DOM, so I searched and found that some of the DOM properties of a button were :
accesskey, disabled, form, id, name, ...

is it what you ment? Where can I define them then? In the css file also? or in the .js file?

again, thanks for your patience :)

Condor
20 Jul 2009, 5:29 AM
No, I meant that the DOM for buttons (the elements used) are different.

Ext 2.x version:

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1001" style="width: auto;">
<tbody>
<tr>
<td class="x-btn-left"><i> </i></td>
<td class="x-btn-center"><em unselectable="on">
<button type="button" class="x-btn-text blist" id="ext-gen33">Action 1</button>
</em></td>
<td class="x-btn-right"><i> </i></td>
</tr>
</tbody>
</table>

Ext 3 version:

<table cellspacing="0" class="x-btn x-btn-text-icon " id="ext-comp-1001" style="width: auto;">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"/>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc"><em unselectable="on" class="">
<button type="button" class="x-btn-text blist" id="ext-gen11">Action 1</button>
</em></td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"/>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table>
And there are a lot more css classes used by a button now.

Mairym13
20 Jul 2009, 5:48 AM
Actually, I have already seen this code. I have been on the example page for buttons and, with firebug I saw those lines. My problem is : it is html code, isn't it? How am I supposed to put html code in my js page or in my css? That is why I couldn't use what I saw.

I thought that maybe I had to create other objects in my code :

bbar :new Ext.PagingToolbar( {
pageSize :Number(nombreRessourceParPage),
store :localListeObjRessource,
displayInfo :true,
items : [ '-', lang.nombreParPage,{
id :'nbPageRessource',
xtype :'numberfield',
monitorResize :true,
width :30,
Height :10,
listeners : {
specialkey : function(field, evenement) {
if (Number(evenement.getKey()) == Number(evenement.ENTER)) {
modifierNbRessAfficher();
}
}
}
}, {
xtype :'button',
text :lang.page_cmd_valider,
handler : function() {
modifierNbRessAfficher();
}
} ]
}
) but I didn't managed to do it properly (nothing changed)
In fact, I have checked the files involved in the production of my page and it seem that all those options, defined in theme.css, are overwritten somewhere... Is it the xtype : button doing it?


I understand that buttons are not the same in EXT js 3.0, but I thought there was a way to product automatically a button, without explaining each border one by one...

Mairym13
21 Jul 2009, 5:15 AM
I have managed to find my pb : I am using seam and my ext-seam-all.js wasn't correct.

Thanks everyone for your help