Customizing Extjs Grids

Here's a fantastic tutorial!

Cheers

Theming in Extjs (Part 2)

Here's part 2!

Changing global CSS themes is nice, but we want more control.

A note: !default makes your css declaration the "earliest" declaration.

Also, you don't actually need to perform "sencha app build"s every time.

sencha ant sass

should be sufficient to reflect changes in your scss files and generate the css.

Custom Component ui's

Every component in the Ext JS framework has a ui configuration (which defaults to "default"). (Used in the to create different types of button types in ST.)

The ext-theme-neutral theme includes SASS mixins for many different Ext JS Components. You can call these mixins to generate new UIs for Components. These mixins go under the "src" folder.

@include extjs-panel-ui(
    $ui-label: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

This mixin call produces a new Panel UI named "highlight-framed". To use, configure a Panel with "highlight" as its ui property (the "-framed" suffix is added to the UI of a panel when you set the frameconfig to true).

Again, remember to build the app to see the reflected changes.

While UI mixins are a handy way to configure multiple appearances for a component, they should not be overused. Because each call to a UI mixin generates additional CSS rules, gratuitous calls to UI mixins can produce an overly large CSS file.

Changing Images

Place the desired image in "my-custom-theme/resources/images/" and give it the same name as the image it is intended to override. For example, let's change the info icon of the MessageBox component. Save the following image as "packages/my-custom-theme/resources/images/shared/icon-info.png"

Now modify your test application to show a MessageBox that uses the custom icon.

Style for App-Specific Classes

Go to ".sencha/package/sencha.cfg", and set this as blank:

package.sass.namespace=

With this set, the file you need to create to correspond with Ext.panel.Panel is "sass/src/Ext/panel/Panel.scss".

Similarly, make "sass/src/MyApp/etc/etc.scss" to customize app-specific classes.

App-level Styling

Styling that is not shared between applications belongs in the application itself, not in the theme. The application acts as the final level in the theme hierarchy. Applications can change theme variables, and they can add their own custom variables and rules for styling the application's views.

Simply use "theme-demo-app/sass/var/view/Viewport.scss"!

Again, you need to build the app again for the changes to take effect.

Also, notice that we use Viewport.scss not Component.scss. This is because Component.js class is not necessarily called in the application

Notice how we did not use !default when setting the $base-color variable. !default is used for setting variables in themes, because those theme variables might need to be overridden in a derived theme, or in an application. !default is not needed here because the application is the end of the line in the theme inheritance tree.

CSS style rules for your application's views should go in the app's "sass/src/" directory in a scss file that has the same path and name as the view it is styling.

Final notes:

• I think you're supposed to perform an "app refresh" everytime you perform a "package build".
• Note: we skipped a section on creating sprites for legacy browsers and performing overrides... Check the original doc for more.
• I don't really know what the section on "Adding Custom Utility SASS" is about...
• I don't look at app migration from earlier versions of Extjs
• Didn't look at section "Organization of Generated SASS"

Theming in Extjs (Part 1)

Theming an Extjs Application with SASS and Compass

It's break, so I decided to play around with Extjs :).

I wanted to look at theming an application using SASS and Compass.

It took me awhile to realize that the correct documentation for doing so on Sencha CMD 3.1 and Extjs 4.2 was here: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming. (For some reason they didn't make finding this doc easy...)

Here's Part 1 of a summary of that tutorial...

Setup:

Generate a workspace for your theme generation

sencha -sdk ~/ext-4.2.0 generate workspace my-workspace

Make a test app to see your theme when you modify it

sencha -sdk ext generate app ThemeDemoApp theme-demo

Then, build the app, and generate a new theme with

sencha generate theme my-custom-theme

Then, this summary gives a good overview of what goes where:

• "package.json" - This is the package properties file. It tells Sencha Cmd certain things about the package like its name, version, and dependencies (other packages that it requires).
• "sass/" - This directory contains all of your theme's SASS files. The sass files are divided into 3 main sections:
  1. "sass/var/" - contains SASS variables
  2. "sass/src/" - contains SASS rules and UI mixin calls that can use the variables defined in "sass/var/"
  3. "sass/etc/" - contains additional utility functions or mixins The files in "sass/var/" and "sass/src" should be structured to match the class path of the Component you are styling. For example, variables that change the appearance of Ext.panel.Panel should be placed in a file named"sass/var/panel/Panel.scss".
• "resources/" - contains images and other static resources that your theme requires.
• "overrides/" - contains any JavaScript overrides to Ext JS Component classes that may be required for theming those Components.

First thing you want to do is inherit from the correct theme.

Go to the package.json file, and modify the "extend" tag to the one you want. For example: 

"extend": "ext-theme-classic"

Now you need to refresh the application.

Do this from the "theme-demo-app" directory. Also use the .sencha/app/sencha.cfg to change the theme to your custom theme.

sencha app refresh

Start playing around:

Now, for play. One of the big advertising points of Sencha was the ability to easily change color schemes of the whole application. Let's try it. Create Component.scss under /my-custom-theme/sass/var/ with the following.

$base-color: #317040 !default;

Then, they say:

Be sure to include !default at the end of all variable assignments if you want your custom theme to be extensible. Without !default you will not be able to override the variable in a derived theme, because Sencha Cmd includes variable files in "reverse" order - most-derived theme first, base theme last. For more information on the use of !default see Variable Defaults

base-color is one of many global css variables. The rest are listed here Global_CSS.

Generate the CSS:

Now, to generate the CSS, go to my-custom-theme and 

sencha package build

Then, inside "my-custom-theme/build/resources" a file my-custom-theme-all.css is generated.

Then, 

If you have already run a build of the app using the classic theme, you should clean the build directory. From the theme-demo-app directory run:

sencha ant clean

This is a step that could be easily forgotten!

Finally, go back to your test application and perform a 

sencha app build

You should see the green theme!

That's all for this post; happy theming!

Loading Extjs Stores

Ok, so I spent about 45 minutes on a really dumb problem.

I needed to do an Ajax request with different parameters in a single extjs store, and for some reason, the store kept on using the first parameters and displayed the same data.

The fix is to call the load method and pass the load method your params!

Yes, you can do this. I probably knew, but I forgot. Hopefully writing this will help me remember.

store.load({
    params:{
        //put params here.
    }
});

Notes about iframes

I've thought iframes were a security threat: what if the whole page you're visiting is an iframe to some rogue site?

I guess you can't really prevent that one, but it just seemed somewhat scary. What if someone iframed to your site willy nilly?

Well, I figured out they can't do that, at least not easily.

I tried to iframe to google's OAuth site, but I got the following js console message:
Refused to display 'https://accounts.google.com/AccountChooser?...' in a frame because it set 'X-Frame-Options' to 'DENY'.

So clearly there are ways to stop this iframe activity via X-Frame-Options.

It looks like this is a setting on Apache.
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

Anywho, I haven't looked in to it much, just wanted to take note of it for future reference.