この記事はArchitecting Your App in Ext JS 4, Part 3 | Learn | Senchaの抄訳・意訳です。 Cascading your controller logic on application launch. Viewのインスタンスを取得するコードはonLaunchメソッドに書くのがいい。onReadyは使わないこと。 onLau…

この記事はArchitecting Your App in Ext JS 4, Part 3 | Learn | Senchaの抄訳・意訳です。 複数のmodel,view,controllerを持つ複雑なアプリの構築方法を解説していく。 題材はPart2の続きでPandoraのリニューアル。 Getting References Part2ではExt.appli…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2の抄訳・意訳です。 Setting up listeners Controllerのinitメソッドでイベントハンドラを設定していく。 app/controller/Station.js init: function() { this.control({ 'stationslist': { se…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2の抄訳・意訳です。 Applying the glue Model,View,Controllerを結合する。 ViewをViewportに追加するのを簡単にする方法がある。 Ext.define('Panda.view.Viewport', { extend: 'Ext.containe…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2の抄訳・意訳です。 ModelやControllerをデザインする方法やコードについて見ていく。 Defining our application Extjs4にはMVCライクなパターンが用意されている。 アプリはまずExt.applicati…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1の抄訳・意訳です。 あー、その２消えてる。。書き直す気力がないので誰か補完お願いします。 Models Viewが分割できたらモデルについて考える。 動的なデータに注目してどんなモデルが必要か…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1の抄訳・意訳です。 アプリのスケーラビリティ、メンテナビリティ、フレキシビリティはほぼアーキテクチャで決まる。 が、残念なことに最初から考慮されていることはあまりない。 アプリの主要…

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containersの抄訳です。 ExtjsのUIはコンポーネントで構成されている。（詳しくはコンポーネントガイド参照） Containerは他のコンポーネントを子に持つことが出来る。 Containerのネスト…

Extjsの開発方法について書いてあるブログなどでは大体 bootstrap.jsをhtmlファイルの中でロードして開発しなさいと書いてある。 けど、bootstrap.jsってext-debug-all.jsをロードするのでデバッグしづらくなるのでは？ ext-debug.jsをロードして、Ext.Loade…

作っているアプリにMVCパターンを適用し、MemoryStoreをJsonStoreに変更したら以下のエラーを吐くようになりました。 Uncaught TypeError: Cannot call method 'indexOf' of undefined Ext.apply.urlAppend ・・・ 原因はStoreがAjaxを使ってJSONデータを取…

herokuでお手軽にRailsアプリを動かそうと思ったけど、最初のデプロイで早速躓く。 ↓の（5）のgitでpushするところまではいけた。 http://kuranuki.sonicgarden.jp/2009/05/rubypaasherokurails.html git push heroku masterを実行すると以下のエラーメッセ…

Extjs4のXTemplateのビルトイン値でちょっとはまったのでメモ。 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate APIドキュメントには以下のビルトイン値があると書かれている。 values,parent,xindex,xcount まずこれらを使う時に{[]}で囲まないと…

備忘録的に仮想開発環境構築手順を記録するよ。 １．Virtualboxと拡張パックをダウンロードしてインストール http://www.virtualbox.org/wiki/Downloads http://download.virtualbox.org/virtualbox/4.1.2/Oracle_VM_VirtualBox_Extension_Pack-4.1.2-73507.…

ローカルでExtjs4のMVC機能を使ったらWebページが全く表示されなくなってしまった。 Chromeのデバッグコンソールでエラーを確認しても GET file:////C:/xampp/htdocs/・・・ と出ているだけでいまいちよくわからない。。 調べたらExt.LoadはXHRでファイルを…

The MVC Application Architecture | Learn | Senchaの例をそのまま実行するとExt.Loader is not enabledというエラーが出た。 これは以下のコードをapp.jsの先頭に書くと解消できる。 Ext.onReady(function () { Ext.Loader.setConfig({enabled:true}); });

Saving data with the Model Ext.define('AM.controller.Users', { init: function() { this.control({ 'viewport > userlist': { itemdblclick: this.editUser }, 'useredit button[action=save]': { click: this.updateUser } }); }, updateUser: function…

Controlling the grid Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List' ], init: function() { this.control({ //自分で作ったViewをクラスとして指定できるよ！ 'userlist': { itemdblclick: this.editUser } });…

Defining a View Viewを定義してみよう。 Ext.define('AM.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', title : 'All Users', //initComponentの中で初期化する。見た目を決めるパラメータの中で動的に変わらないものはここで…

公式：http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture クライアントサイドでもMVCパターンを使って保守性の高いコードを書こう！ Extjsと一般的なMVCの違いはStoreがあること。Storeは エリック・エヴァンスのドメイン駆動設計 (IT A…

3. Statics staticsプロパティでstaticメンバを定義できるよ。 Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { //staticメソッド内でのthisはクラスそのものを指すよ return new this({brand: brand}); } }, config: { …

2. Configuration クラスには特殊なconfigプロパティを定義できる。configは以下の特徴を持つ。 ・他のクラスから参照出来ない ・Getter,Setterメソッドが自動的に定義される ・applyメソッドが各config毎に自動的に定義される。このapplyメソッドはSetterメ…

III. Hands-on var MyWindow = Ext.extend(Object, { ... }); ↑はネームスペースを汚すので良くない。 My.cool.Window = Ext.extend(Ext.Window, { ... }); ↑ならOK。でもMy.coolにオブジェクトを代入しておかないといけない。 Ext.ns('My.cool'); My.cool.W…

公式：http://www.sencha.com/learn/the-class-system/ Extjs4のクラスシステムはVer.3からだいぶ変わったからちゃんと確認した方がいいよ。 I. Overview JSのコードは柔軟性が高いがゆえに読みづらい。保守性が落ちる。 Extjs4にはクラスベースのOOPのいい…

3. Deployment Sencha SDK Toolsは静的コード解析をしてファイル間の依存関係をドキュメントにしてくれる。さらにExtjsのうち使っているファイルだけを取り出して結合してくれる。 以下のコマンドを打つとJSBuilder file format形式で依存関係を書き出してく…

最近Javascriptにはまってます。 最近Ext Js 4というライブラリを触ってみたところなかなか良さそうだったのでまずは公式ドキュメントを読んで勉強していきたいと思います。 公式：http://www.sencha.com/learn/extjs/?4x Getting Started with Ext JS 4.0を…