ExtJsへの道 -2ページ目

ExtJSコンポーネントの日本語表示

DateFieldのカレンダー表示などのExtJSコンポーネントの表示を日本語にしたい場合、ext-lang-ja.jsを読み込みます。
ext-lang-ja.jsはExtJS展開ディレクトリの下のsource/localeの下にあります。
ext-lang-ja.jsはUTF-8で作成されているのでHTMLファイルがShift-JISなどで作成されている場合は下記のようにcharsetを指定すれば文字化けしません。
<script type="text/javascript" src="../../source/locale/ext-lang-ja.js" charset="utf-8"></script>

treeのアイコンを変更するには

treeのアイコンはイメージファイルをCSSで定義しているため、CSSクラスを上書きします。
修正するクラスは..x-tree-node-collapsed、x-tree-node-iconクラスです。
下記のように修正します。
<style>
.x-tree-node-collapsed .x-tree-node-icon {
background-image:url(./album.gif);
}
</style>

Gridの列のスタイルを変更するには

ColumnModelのConfig属性cssを利用して変更することが可能です。
このときcssの値はクラスではなくスタイルを指定します。

columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company',css:'color:#000000;background-color:#0000FF'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],