code:x

ども、小堤です。

だらだら、Sencha Touchのソース眺めてたんですが(ver 0.92)

PlatformSelector.js
で書いたやついらないですね（爆

src/core/Platform.js

を読み込めば、Ext.platformオブジェクトが生成できます。
判定だけしたければ、コレ読み込めばOKってことです。

ってことで、訂正？ですｗ

ども、小堤です。

先の投稿で、Ext.setupメソッドにしていするコンフィグオプションの解説を行いましたが、ここでは、それぞれのコンフィグオプションが指定されることにより、何が起こるのかを検証していきます。

Continue reading

ども、小堤です。
明日は、「Ext JS & Sencha Touch勉強会7月＠東京」ですね。

既に、ATNDはいっぱいになってしまったみたいですが、USTREAMで配信されるらしいので、枠あふれちゃったひと、地方でこれない人など、よかったらみてみてください。

まぁ、そんなこんなで勉強会皆勤賞の、小堤君ですが、今回も参加させていただきます。
最後の枠？なのかな。

ま、いつも通りです（笑）
今日は、勉強会でもネタになるSencha Touchの話ですが、これ、スマートフォンのコンテンツ開発には、欠かせなくなりますよね。たぶん。
ってことで、その入り口の、Ext.setup（聞き慣れない人もいるでしょうけど）についてです。

Continue reading

ども、小堤です。
ツイッターくらいしか、書いてないんですが、ブログ放置ですね。完璧。

んで、またどーでもいいものなんですが、PlatformSelector.jsです。
Sencha Touchとか、Ext Coreとか読み込む前に、そもそもiPhoneの時にリダイレクトとかしたいときに使えるもんです。

サーバーサイドで判定できない仕事もあるもんで（やってるんですが）
あると便利かな。と。

さらしときます（笑）

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

PlatformSelector = {
    isWebkit: /webkit/i.test(navigator.userAgent.toLowerCase()),
    isPhone: /android|iphone/i.test(navigator.userAgent.toLowerCase()) && !(/ipad/i.test(navigator.userAgent.toLowerCase())),
    isTablet: /ipad/i.test(navigator.userAgent.toLowerCase()),
    isChrome: /chrome/i.test(navigator.userAgent.toLowerCase()),
    isAndroidOS: /android/i.test(navigator.userAgent.toLowerCase()),
    isIPhoneOS: /iphone|ipad/i.test(navigator.userAgent.toLowerCase()),
    hasOrientationChange: ('onorientationchange' in window),
    hasTouch: ('ontouchstart' in window)
};

if(PlatformSelector.isTablet) {
    location.href = 'ipad.html';
} else if(PlatformSelector.isPhone && PlatformSelector.isIPhoneOS) {
    location.href = 'iphone.html';
}

/*
 * Local variables:
 * tab-width: 4
 * c-basic-offset: 4
 * c-hanging-comment-ender-p: nil
 * End:
 */

Sencha Ext JS / Sencha Touch プロフェッショナルプログラミングガイド
CSSの基本とCSSセレクター

Continue reading

はぁ。小堤です。

ブログ、WordPressのバージョンアップしたにも関わらず、なかなかかけないとか。

SpreadOfficeの開発は、相変わらずガリガリ。

スケジュール管理機能もつくらないけないんですが、まぁ当たり前ですけど、Ext JSに、んなもん最初から用意されているわけもなく。
（将来的に実装されるとかないとか？どうなんだろ）

とりあえず、レイアウトはiPad風。
ちゃんと、日付計算とか、切り替えとか実装
したよ・・・org

中身のデータ読み込みまだだけど。
1.5日。まぁまぁでしょ。

日表示、週表示、リスト表示が残ってるけどね（爆

hboxレイアウトと、vboxレイアウトがあるExt JS 3.xのおかげですわ、ホント。

レイアウトしたり、配置したり、こなれたもんだ・・すぐできる。

はやくスケジュール一段落させて、OmegaTrickのバージョンアップしたいんですけど。

というか、なんか早く気分よくやらせれ。

Sencha Ext JS / Sencha Touch プロフェッショナルプログラミングガイド
イントロダクション

Continue reading

ども、小堤です。
ご無沙汰しています。

いや、ただブログ・・・いい加減バージョンアップしたよってはなし。
いろいろやりたいことあってね。

いままでの散乱したExt JSの記事まとめちゃいたいのと、Sencha Touchも無視できないので。
ページ作って、投稿でかいていきますが。

まぁ・・忙しいんで、そんなにがりがりかかないんで、宛にしないでくださいｗ

とりあえずｗ生きてますｗ

小堤です。

ご無沙汰ですねぇ、Twitterしかやってない気がします。

んで、Senchaになったとか、SenchaTouchの話もやっと堂々とかけるのですが、それはあとでｗｗｗ

んで、題名のネタ。

style: ‘padding: 10px’

こんなコンフィグオプションの指定することありますよね？まぁできるだけ、デザインに関してはCSSに持っていて、clsで指定する方がよいですが。

これ、Portalとか、まぁ特にfloatとかされている中にアイテムを配置するときに 、Chromeとかだと、きかないときあります。

聞かないと言うよりは、ExtがCSSを指定しないのか、Chromeが識別できていないのかは定かでないですが、インスペクタでみると反映されていないんですね。

んで、

styleは1個でもオブジェクト形式で指定すれ！

です。

style: {
padding: ’10px’
}

 この癖つけといたほうが、身のためダと思いますし、複数指定する場合も楽ですよね。

ってことで、久しぶりのブログこれかよ！って話なんですがｗメモｗｗ

ども、小堤です。

さて、ちょっとコードばっかり書いてて、ちょっとつかれたのでブログを。めずらしい・・。

みなさんは、Ext JSのフィールドをレイアウトする場合、何にレイアウトしますか？Ext.form.FormPanelですか？Ext.Panelですか？サンプルは、FormPanelにレイアウトしていることが多いですね。これは、FormPanelのアイテムにフィールドを設定すると、フォームレイアウトでレイアウトされるからです。

では、Ext.Panelにレイアウトしてはいけないのでしょうか？

そんなことはありません。

Ext.Panelにレイアウトしてもかまいません。しかし、その場合、レイアウトも指定しないと、FormPanelに配置したようにはなりません。

layout: ‘form’

としてあげる必要があります。

さて、ここまでは超初心者でも知ってる話ですんで、どーでもいんですが。

注意すべき点があります。

Ext.Panelの初期xtypeはExt.Panelであるということと、レイアウトは、containerレイアウトである。という点です。

何が言いたいかというと。

Ext.Panel内のアイテムで次々レイアウトを切って、フィールドをぶっこんでいくと、全部パネルでレイアウトされるんですね。

そうした場合、まず、ボーダー引かれます。うざいです。背景色も指定されてしまいます。結論から言うと、大枠は、Ext.Panelでよいのですが、その中にcolumレイアウトなどをいれたりしてレイアウトを行う場合、必ずExt.Containerクラスをxtypeで指定するようにします。

こうすることで、フィールドのレンダリングスピードが向上します。

layout: ‘column’,
items: [{
xtype: 'container',
columnWidth: .5,
items: [{
xtype: 'textfield'
}]
},{
xtype: ‘container’,
columnWidth: .5,
items: [{
xtype: 'textfield'
}]
}]

ざっくりかくと上記のようになります。（インデントきいてませんがｗ）
Ext JSのレイアウトは、コンテナーに対して、ネストしながらレイアウトを行っていきますが、この枠がすべてExt.PanelになるかExt.Containerになるかで、パフォーマンスは結構違います。
また、Ext.Containerの場合、bodyが存在しないので、背景がきれいに透けます。なので、大枠で背景を指定して、ちゃんと透けてくれるわけですね。
余計なボーダー消したりとかのコードも必要ないですし、パフォーマンスもよいですし。

ホントは、もうちょいいろいろあるんですが、簡単なテクニックとして、レイアウトするときは、だまってExt.Containerを指定する。覚えておいておくといいですよ。