TechDocExtJsInterface Css

Using CSS in Ext JSBy: Roma Lynne Espiritu

What is CSS?

CSS stands for Cascading Style Sheet. It is used to define how an element in an application is

to be displayed in the Web. Styles for a particular Web application are usually stored in an

external style sheet.

For this tutorial, several CSS properties will be used in order to demonstrate how a user can

create and modify the style of the example Ext JS application.

Apply Styles Menu in Ext JS

Although Ext JS has a default style sheet, a user may change the design of an Ext application

according to his/her preference using CSS. By creating an external style sheet, several designs

can be applied to the interface. Below are some steps in creating an “Apply Styles” menu in Ext

JS:

var applyStyles = new Ext.menu.Menu({ // creates the “Apply Styles” menu button in the toolbar id: 'applyStyles', items: [{ text: 'Default',

handler: onItemClick1 },{

text: 'Pink', handler: onItemClick2 },{ text: 'Black', handler: onItemClick3 },{ text: 'Lime', handler: onItemClick4 }]

});

function onItemClick1(item){ // the function used to change the default style sheet to other style sheets

Ext.util.CSS.swapStyleSheet('theme', 'userView_default.css'); }

function onItemClick2(item){ Ext.util.CSS.swapStyleSheet('theme', 'UserView_pink.css');

}

function onItemClick3(item){

of 13

Ext.util.CSS.swapStyleSheet('theme', 'UserView_black.css');}

function onItemClick4(item){ Ext.util.CSS.swapStyleSheet('theme', 'UserView_lime.css');

}

In the .html page, you must include an id, which will be used in the .js page, to enable the “swapping” of different style sheets. For this example, the stylesheet was given an id = “theme”.

<link rel="stylesheet" type="text/css" id="theme" href="css/userView_default.css" />

Name Type Value DescriptionExt.util.CSS.swapStyleSheet Method

Defined by CSS

( String id, String url ) : void

Dynamically swaps an existing stylesheet reference for a new one

Summary of Commands Used

Below is a screenshot of the ‘Apply Styles’ menu button:

An External Style Sheet Example

In general, it is preferable to have an external style sheet stored in a CSS file. Many

programmers develop their CSS in this manner because it saves a lot of work and it is easier to

edit a single style sheet for the whole application.

Here is a sample design of the application using an external cascading style sheet in Ext JS.

/*The Pink Theme*/

/*used to adjust the position of the color buttons*/.mybutton-text{

margin-bottom: -8px; margin-left: 1px;

}

#panelLH{margin-bottom: 5px;

}

of 13

/* used to change the style of the toolbar*/.x-toolbar{ background:none;

background-color: #FF99CC;border-color: #FF0066;

}

/*used to change the style of the text of all buttons included in the program*/.x-btn-text{ color: purple;}.x-btn button{ font:bold 10px;}

/*used to change the style of toolbar buttons*/.x-toolbar .x-btn-left{

background:none;border: transparent 1px solid;

}.x-toolbar .x-btn-right{

background:none;border: transparent 1px solid;

}.x-toolbar .x-btn-center{

background:none; /*background is set to none to allow the color buttons to render the chosen color in the color palette*/

padding: 0px; border: transparent 1px solid;}

/*used to change the style of toolbar buttons with mouse over*/.x-toolbar .x-btn-over .x-btn-left{

background:none;background-color:transparent;border-style: solid;border-width:3px 0 3px 3px;border-color: red;

}.x-toolbar .x-btn-over .x-btn-right{ background:none;

background-color:transparent;border-style:solid;border-width:3px 3px 3px 0;border-color: red;

}.x-toolbar .x-btn-over .x-btn-center{ background:none;

background-color:transparent;border-style:solid;border-width:3px 0 3px 0;border-color: red;

}

/*used to change the style of toolbar buttons when pressed*/.x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left{

background:none;background-color:transparent;border-style:solid;

of 13

border-width:3px 0 3px 3px;border-color: #660066;

}.x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right{ background:none;

background-color:transparent;border-style:solid;border-width:3px 3px 3px 0;border-color: #660066;

}.x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center{

background:none;background-color:transparent;border-style:solid;border-width:3px 0 3px 0;border-color:#660066;

}

/*used to change the style of the menu list*/.x-menu{ background:none;

background-color:#FF99CC;border-color: #FF0066;

}

/*used to change the style of the menu label*/.x-menu a.x-menu-item{ font:bold 10px; color: #FF0066;

border-color: #FF0066;}

/*used to change the style of a menu separator*/.x-menu-sep{ background:none; background-color:lavender; border-bottom:1px solid purple;}

/*used to change the style of a menu item when focused*/.x-menu-item-active{ background:none;

background-color:transparent;border-color: #660066;

}

/*used to change the style of the menu color palette*/.x-color-palette a{ border-color: #FF66CC;}.x-color-palette em{ border-color: #FF0066;}

/*used to change the style of the menu color palette with mouse over*/.x-color-palette a:hover, .x-color-palette a.x-color-palette-sel{ background-color:#FF66CC;

border-color: #FF0066;}

of 13

/*used to change the style of the panel*/.x-panel-body-noheader, .x-panel-mc .x-panel-body{ background:none;

background-color:#FF99CC;border:none;

}

/*used to chage the style of the panels for the color toolbar*/.x-panel-tbar .x-toolbar { background:none;

background-color: #FF99CC;border:none;

}

.x-panel-tbar-noheader .x-toolbar, .x-panel-mc .x-panel-tbar .x-toolbar { border-color: #FF99CC;}

/*used to change the style of the combo box*/.x-combo-list{ border-color: #FF0066;}

.x-combo-list-inner{ background:none; background-color: beige; border:1px ridge red;}

.x-combo-list .x-combo-selected{ background:none; background-color: beige; border:1px solid purple !important;}

.x-combo-list-item{ color: black; border:1px solid beige;}

/*grid*//*used to change the style of the grid header*/.x-grid3-header{ background:none; background-color: #FF99CC; border:2px solid #FF0066;}

/*used to change the style of the grid header buttons*/.x-grid3-hd-row td{ background-color: #FF99CC; color: #FF0066; border:1px solid #FF0066;}

/*used to change the style of the grid header with mouse over*/td.x-grid3-hd-over .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner{ background:none; background-color: #FF99CC; color: purple;

of 13

}

/*used to change the style of the grid row elements*/.x-grid3-row td{ color: purple; font-weight:bold;}

/*used to change the style of the grid row*/.x-grid3-row{ border:1px solid #FF0066; border-top-color:#FF0066; border-bottom-color:#FF0066;}

/*used to change the style of the grid row with mouse over*/.x-grid3-row-over{ background:none; background-color: #FF99CC; border:1px solid #FF0066; }

/*used to change the style of the grid row when selected*/.x-grid3-row-selected{ background:none; background-color: #FF0066!important; border:1px solid purple; color:#FF0066;}

/*used to change the style of the grid body*/.x-grid3, .x-grid3-body{ background-color: beige;}

/*forms*//*used to change the style of the form fieldsets*/.x-fieldset{ background:none; background-color:transparent;

border-width: 3px;border-style: double;border-color: #FF0033;

}

/*used to change the style of the fieldset legend*/.x-fieldset legend{

background-color:transparent;border: solid 1px #FF0033;font:bold 10px;color:#FF0066;text-align:center;padding: 2px

}

/*used to change the style of the labels*/.x-form-item label, .x-panel-body, .x-btn-button{

color: purple;font-size: 12px;font-family: monotype corsiva;

}

of 13

/*used to change the style of the input form fields*/.x-form-text, .x-form-field{

background:none;background-color: beige;

border: red ridge 1px;}

/*use to add an image to the buttons (flags)*/#france{ background: url(images/france.png) center no-repeat;}

#uk{ background: url(images/uk.gif) center no-repeat;}

/*to adjust the position of container fieldset*/#containerfieldset{ position: relative; top: 10px;}

/*for the fieldset of results panel*/ #resultspanel .x-fieldset{ border: solid 1px;}

/* to adjust the position of items fieldset*/#itemsfieldset{ position: relative; top: 5px;}

/*to adjust the position of container fieldset*/#containerfieldset{ position: relative; top: 10px;}

/*to adjust the position of results panel*/#resultspanel{ position: relative; top: 10px;}

/*to adjust the position of grid panel*/#gridpanel{ position: relative; top: 25px;}

of 13

Here is a screenshot of the interface using the Pink theme style sheet:

of 13

More Styles

Here are some sample designs used in the program:

/*The Black Theme Theme*/

/*The Lime Theme*/

of 13

Property Value Descriptionbackground background-color

background-imagebackground-repeat background-attachment background-position

A shorthand property for setting all background properties in one declaration

background-color color-rgbcolor-hexcolor-nametransparent

Sets the background color of an element

background-image url(URL)none

Sets an image as the background

background-repeat repeatrepeat-xrepeat-yno-repeat

Sets if/how a background image will be repeated

border border-widthborder-styleborder-color

A shorthand property for setting all of the properties for the four borders in one declaration

border-style nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

Sets the style of the four borders, can have from one to four styles

border-color color Sets the color of the four borders, can have from one to

of 13

four colorsborder-width Thin

mediumthicklength

A shorthand property for setting the width of the four borders in one declaration, can have from one to four values

padding padding-toppadding-rightpadding-bottompadding-leftautolength%

A shorthand property for setting all of the padding properties in one declaration

margin margin-topmargin-rightmargin-bottommargin-leftautolength%

A shorthand property for setting the margin properties in one declaration

font font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-bar

A shorthand property for setting all of the properties for a font in one declaration

font-size xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

Sets the size of a font

font-family family-namegeneric-family

A prioritized list of font family names and/or generic family names for an element

font-weight normalboldbolderlighter100200300400500600700800900

Sets the weight of a font

text-align leftrightcenter

Aligns the text in an element

of 13

justifycolor color Sets the color of a textposition static

relativeabsolutefixed

Places an element in a static, relative, absolute or fixed position

top auto%length

Sets how far the top edge of an element is above/below the top edge of the parent element

left auto%length

Sets how far the left edge of an element is to the right/left of the left edge of the parent element

right auto%length

Sets how far the right edge of an element is to the left/right of the right edge of the parent element

bottom auto%length

Sets how far the bottom edge of an element is above/below the bottom edge of the parent element

Summary of CSS Commands Used1

CSS Colors

“CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green,

and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0

(hex 00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.”2

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

1 http://www.w3schools.com/css/css_reference.asp Date Accessed: 5 May 2009.2 http://www.w3schools.com/css/css_colors.asp Date Accessed: 5 May 2009.

of 13

TechDocExtJsInterface Css

Documents

Transcript of TechDocExtJsInterface Css