Custom ExtJs CSS Generation

January 23, 2012

CssFactory Class

CssFactory Class

http://simplphp.com

Demo 2

The “CssFactory” class can be used to generate custom styling for ExtJs containers (or for plain HTML).

Here is the CssFactory “standardStyle” method:

function(self) {
join([
send(self,'activetab'),
send(self,'cardbody'),
send(self,'cardpanel'),
send(self,'desktop'),
send(self,'footer'),
send(self,'footertext'),
send(self,'header'),
send(self,'inactivetab'),
send(self,'navbar'),
send(self,'newsbody'),
send(self,'newspanel'),
send(self,'outerpanel'),
send(self,'page'),
send(self,'signin'),
send(self,'spacer'),
send(self,'title'),
send(self,'titlehtml')
],'\n');
}

It simply concatenates a number of styles generated by other methods. Of course, you can make other styles using a different selection of methods.

Also, CssFactory can be subclassed making it possible to have a specific style generator for each project while still retaining a common style library for use across all projects.

The same technique applies to adding JavaScript functions through the use of JavaScriptFactory.

SIMPL is based on concept of having a large library of classes and re-using the classes for multiple applications.

This styling creates rounded edges for a series of nested “Ext.container.Container” classes.

Demo 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: