6.6. The Style Sheet

Let's now move on to the application style sheet housed in styles.css, which, similar to index.htm, is very simple. The first style class encountered is cssSource, which is one we've seen many times before so I'll skip an explanation here. I won't, however, skip the next two selectors for styling the text seen on the Details pane of the Accordion:

.cssDetailLabel {
  font-weight : bold;
  font-size : 12pt;
  font-family : arial;
}

The cssDetailLabel style is applied to the field label, so it's bolded to set it off from the data itself. Speaking of the data:

.cssDetailData {
  font-size : 12pt;
  font-family : arial;
}

As you can see, the only different is that the data itself Isn't bold; otherwise it's the same.

The next style is also something involved in the display of details:

.cssAltRow {
  background-color : #eaeaea;
}

Simply stated, this is applied to the rows in the table that holds all the detail fields, or more precisely, every other row in the table, so we get some striping going on.

The last style is something entirely new:

.x-table-layout {
  width : 100%;
}

As a quick experiment, try deleting this style and then reload the application. you'll see that the top header section doesn't stretch across the entire screen; it's all scrunched up on the left side only. That's because a TableLayout is used for the header, and a table with two cells is generated. The toolbar icons are in the first, and the logo is in the other. The toolbar icons should be left-aligned while the logo should be right-aligned, because I wanted them up against the edges of the screen. However, that won't happen by default because the table will be sized to its contents, not the page width. So, this style overrides one of Ext JS's built-in styles that is applied to the table generated by a TableLayout. Setting the width to 100% gets the table to stretch across the entire page, and then those alignments work as expected and everything looks as it should in the header.