PDA

View Full Version : [A frequently asked question ?] How a Component can read class from an external css ?



laurent64
27 Sep 2010, 1:31 AM
Hello Everybody,

as i tagged my topic, my question is as simple as it may be often asked. So I apoligize. But searching in examples, and previous topics.

I simply have a button in my example.js, defined in a Panel



var myCard = {
xtype : 'button',
id : 'red',
cls : 'colorButton'
};

function makePage(){
new Ext.Panel({
fullscreen : true,
items : [myCard]
});
}


Ext.setup({
onReady : makePage
});

example.js

Then a simple CSS file with a class colorButton


.colorButton {
width : 30%,
margin-left : auto,
margin-right : auto
}

example.css

And finally a HTML file :


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example</title>
<link rel="stylesheet" href="sensa_touch_essentials/resources/css/ext-touch-debug.css" type="text/css">
<link rel="stylesheet" type="text/css" href="example.css">

<script type="text/javascript" src="sensa_touch_essentials/ext-touch-debug.js"></script>
<script type="text/javascript" src="example.js"></script>

</head>
<body>
</body>
</html>

example.html

Where sencha-touch-essentials is the sencha folder without unecessary files for deploying.


So what's wrong with my configuration ? Why the Sencha button remain unchanged with and without the example.css ?

Apologizes for such a simple question and such a mistake in my code
Thanks :)

fx-mike
27 Sep 2010, 1:38 AM
Your CSS is syntactically incorrect, try this:



.colorButton {
width: 30%;
margin-left: auto;
margin-right: auto;
}

laurent64
27 Sep 2010, 1:44 AM
Hello fk-mike :)

Thank you very much !!!

I were so used to Sencha line-ending Syntax, that I had forgotten CSS's one !

What a mistake ! Thank you because if you didn't answered me, i wouldn't think about such a simple mistake (the simpliers ones are sometimes the worse ones => you don't think to check them)

-----------------------------------------------------------------------------------------

What the property for a id, this time, please ? I don't find it in the API documentation, so bad researcher am i :(
Thanks

fx-mike
27 Sep 2010, 1:56 AM
Do you mean the id of an Ext.Component? That would be just

id: 'something'
exactly like you used in your example.
Didn't see it in the API, but it's in the code.

laurent64
27 Sep 2010, 2:06 AM
No,

i meant an CSS sharp id.


#red {
}

fx-mike
27 Sep 2010, 2:21 AM
Ok, so whats the question...?
You have id: 'something' in the component and #something in your CSS, what isn't working?

laurent64
27 Sep 2010, 4:02 AM
In fact, i haven't test anything for retriving #red id in my button component, i wanted to be sure of the syntax before trying one hundred of misunderstood - by me - possibilities, and more with those from ExtJS.

The following code didn't work :


new Ext.Button({
cls : '#red'
})


So is it cls property or anything else ?

Thanks :)

fx-mike
27 Sep 2010, 4:31 AM
As I said, use the id property to set an id for a component.
This is from your example above:



var myCard = {
xtype : 'button',
id : 'red',
cls : 'colorButton'
};


This corresponds roughly to the following markup:


<div id="red" class="x-button colorButton"></div>


And the CSS to go with it would look something like this:


#red {
//whatever
}

.colorButton { // or #red.colorButton
width : 30%,
margin-left : auto,
margin-right : auto
}


You probably could have found that out in minutes by just giving it a try and looking at the markup that is generated. Don't be shy to make mistakes, you can always ask as soon as you have a specific problem that you can't solve by yourself, but at least try a few of the possibilities that come to your mind.

laurent64
27 Sep 2010, 4:32 AM
Excuse, me. After going back on your response #7, i really notice that the CSS ID must be same as button id.
It worked :)

Apologize and Thanks :)

(Cross posting)

fx-mike
27 Sep 2010, 5:26 AM
Glad I could help