Question

SALAM
I want to customize the html text, buttons and text fields with CSS sencha. how can I do?
if I have to put all the CSS code in a file apart, how can I connect each CSS code to a specific part. example:
I want to changed the font of the following text “it fits your needs “:

enter code here

App.views.HomeIndex = Ext.extend(Ext.Panel, {

items: [
{
xtype: 'carousel',
id: 'car',
fullscreen: true,
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',


items: [ {
  html: '<div align="center" id="z">it fits your needs </br></br> <img        src="images/logo.jpg" width="160" height="151""/></div>'
         }]
 }]

});
Ext.reg('HomeIndex', App.views.HomeIndex);

how I can do?
thank you

Answer 1

you can define a class for each one like below in your html file

.Heading{
         text-align: center;
  -webkit-border-top-right-radius:0.5em;     
  -webkit-border-top-left-radius:0.5em;
  font-weight: bold;
  font-style: calibri;
  padding:6px;
  font-size:15px;
  color: black;
  background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(lightgrey));
                      width: 100%;
                      height: 30px;
        }

and you can use the class in your div tag by refering as

html: '<div class="Heading"></div>'