2011年3月27日日曜日

ExtJS-108 ATNDの受付のその後(BorderレイアウトのSplitBarの移動)

子供と寝てしまい、午前一時半からの調査と実装。
勘違いとなれないレイアウト周りで超はまりました。
以前、コードリーディングした際に勉強してたはずなのに度忘れしてました。

やりたいイメージは、

①イベント検索 ボタンでイベント領域を広げておきたい。




②イベントのユーザリストへDD時にユーザ領域を広げたい















です。


領域は可変にしておきたい。
でもいちいちSplitBarを選択して調整したくない。
で、Grid間のDDを有効にしたいから
collapseだとこまる。

なのです。


ちなみにこの後は、




参加リストからDDするとダイアログが出てて
受付します。
















繰り返しになりますが、
SplitBarは可変にしておきたいし、collapseだとグリッド間のDDが使えない。
で、
結果から言うと


borerlayoutのonSplitMoveを稼動させてやる。




に落ち着きました。

コードの抜粋(ビューポートに追加実装しちゃってます)。


/**
 * 下部スプリットバー移動サイズ計算
 */
calcSouthSplitMoveSize: function(dir){

    var me = this,
        split = me.layout.south.split,
        panel = me.layout.south.panel,
        result;
      
    if (dir === 'bottom'){
      
        result = panel.getHeight() - me.layout.south.minHeight;
  
    } else if (dir === 'top'){
  
        result = me.layout.south.height - panel.getHeight();
  
    }
  
    return result;

},

/**
 * イベントリージョン拡大
 */
openEventRegion: function(){

    var me = this;
  
    me.resizeRegion('bottom');

},

/**
 * 受付リージョン拡大
 */
openReceptionRegion: function(){
  
    var me = this;
  
    me.resizeRegion('top');

},

/**
 * リージョンサイズ指定
 */
resizeRegion: function(dir){

    var me = this,
    split = me.layout.south.split,
    panel = me.layout.south.panel,
    movesize = me.calcSouthSplitMoveSize(dir);
  
    split.el.move(dir, movesize , {duration: 0.25, easing: 'easeBoth', callback: function(el) {
        var me = this;
        //alert('moved!!');                              
    }, scope: me});
    split.fireEvent('beforeapply', me, dir=== 'bottom' ? panel.getHeight() - movesize : panel.height);
  
}







ハマリからの脱出経路。


■ビューポートのExt.layout.BorderLayout.SplitRegionが生成されるくみは
BorderLayout.jsの117行目あたりを。(center以外かつ、split=tureで生成)

■Ext.layout.BorderLayout.SplitRegionがSplitBarを生成する部分は、
おなじく、BorderLayout.jsの1071行目あたりから。
1076行目でリスナ設定されているね。

■Ext.SplitBarの移動については、
Ext.SplitBar.jsの202行目あたりからDDの終焉の実装部。

■ここまでくればSplitBarオブジェクトとPanelオブジェクトが触れればゴール。



※はまってしまったところは、
SplitRegionのことをてっきりSplitBarだと思ってたことと、
その誤解が解けたあと、
SplitBarはSplitRegionにくっついていると思ってしまったこと。
(これは以前コードリーディング発表時にレイアウトまわりみたとき見てたはずなのに)

と、ソース見ないと通常の倍はかかる気がする。


結論:だからはじめからソースを見りゃいいんだよ。


あとは107で決めた機能拡張したらゴール。あと二回かな。。
そしたら念願のSenchaTouch!!


※今回のこのレイアウトについては完全な予定外実装。


2011年3月22日火曜日

ExtJS-107 ATNDの受付のその後

2月にちょいと作ってたやつを三連休のスキマ時間で
仕上げてしまおうとおもったけど、なかなかそう上手く時間は取れず。。

一応
・ViewPortによる設定と
・twitter_imgフィールドをimgタグに入れる

ってのだけはやっておいた。
twitter_連携してない人の画像は出来ればnoimageとかそういう類の
やつがいいんだろうけど、ひとまずchasheflyでやってるし
default配下の画像にした。

あとは
・懇親会費の設定ダイアログ、今は固定1000円だし。
・懇親会費じゃない主会費ってのもあるね。
・項目とかグダグダなのでUI周りを整える
って位をつけて
早くSenchaに行きたい。
でも相変わらず牛歩。














寝よう。

2011年3月19日土曜日

最近忙しい

NextJsもあれ以来全く触れてないし、
ExtJsも昨日久々にプログラムをかけた。

三連休でひとまずブログを一度更新することを目標にしよう。
てか一ヶ月以上ほったらかしだったんだ。。どうりで忘れるわけだ。

しっかし、年度末ってのはいろいろ重なるね。
今日は長女の7才の誕生日。
疲れた顔なんてしてられんな。。


2011年3月1日火曜日

NextJS-1環境だけはひとまずつくろう


ExtJS106のプログラムはほうっておいて
Win環境にnextjs環境をサクーって作りたかったんだ。
そしたらkotsutsumiさんが、VMWareいれてcentosいれりゃいいじゃんよーって
お勧めしてくれたんでそうしたよ。

またいつか、絶対に環境壊すと思うのでメモメモ。

1:VMware インストール

2:centOSのディスクイメージゲト
    CentOS5MinimalVirtualAppliance-1.3.7zをダウンロード
    (今はリンク切れ起こしてる。。)

3:centOS起動

4:ユーザ追加
    useradd ユーザ名
    passwd ユーザ名

5:sudoユーザ追加
   vim /etc/sudoers
  
   root ALL=(ALL) ALL
  
  の下に
  
  ユーザ名 ALL=(ALL) ALL
  
  を追加する
6:ログアウト

   logout
  
7:ログイン

   ユーザ名でログイン

8:node インストール(今は4.0.1が最新だった)

   sudo yum install build-essential libssl-dev curl
   mkdir tmp
   cd tmp
   wget http://nodejs.org/dist/node-v0.4.1.tar.gz
   tar -xvzf node-v0.4.1.tar.gz
   cd node-v0.4.1

※ここでgcc 入ってないことがわかる。

   sudo yum install gcc-c++


※openssl-develもない。


   sudo yum install openssl-devel

   ./configure --prefix=~/local
   make
   sudo make install

8:PATHを通す
   ~/.bash_profileを編集

   $PATHに~/local/binを追加する

   一度ログアウト後にパスが通っているか確認するよ。

   echo $PATH

9:node用のポート開放(nodejsのexample実行するのにあけただけ)
  →これ以降の手順ではnodejsのexample確認はしないので別にいらない。

   /etc/sysconfig/iptablesを編集

   -A INPUT -p tcp --dport 8142 -j ACCEPT

   を追記。

10:npm インストール

   cat >>~/.npmrc <<NPMRC</ppp>
   root = $HOME/.node_libraries
   binroot = $HOME/bin
   manroot = $HOME/share/man
   NPMRC

   vim ~/.bashrc

   export NODE_PATH=$HOME/.node_libraries:$PATH
   export PATH=$HOME/bin:$PATH
   export MANPATH=$HOME/share/man:$MANPATH

   を追記

   curl http://npmjs.org/install.sh | sh

   を実行

11:作業用にXwindows入れておく。(コレはいらない人はいらないよね)
   rootで

   yum groupinstall "X Window System" "GNOME Desktop Environment"


12:nextjs インストール(他のパッケージもね)

   npm install NX connect formidable mysql socket.io

13:mongodbのインストール(てかなんで12でやらんかった俺。)

   npm install mongodb

14:Win環境とcentOSで共有を張っておきたい。

   nodejs用のファイル記述するのにwin環境上で書いて
   そのままcentosに切り替えて動かしたい。
   ってことでsambaいれればいいの?ってつぶやいたら
   @martini3ozさんが教えてくれました。VMWareで共有できるよーて。

   VMwareの設定で共有張ったら再起動!
   で、

   /mnt/hgfs/共有名

   でほうら見えた。
   これでWin上での開発が楽チンになるってことです。

16:ひとまずnextjsのサンプルを環境にDL

   共有貼ったフォルダにNextJsの環境を放りこんでおこう。
   examplesがまず欲しいからね。

17:サンプルの実行
   で、ひとまず、ifconfigでIP見て、
   nextjsのサンプルを動かすってことで、
   nextjs配下のexamples配下のwebsocketに移動して

   node server.js

   を実行。

   winのブラウザで

   http://192.168.150.128:3000/にアクセス。

   チャットが動いた事を確認。

















めでたし。



■下記、お世話になったサイトです。サイト管理者様。ほんとに感謝です。ありがとうございました。 
NextJS
http://www.nextjs.net/

nodejs
http://nodejs.jp/nodejs.org_ja/

自分の感受性くらい
http://d.hatena.ne.jp/t_43z/20101013/1286957802

にゃほ~
http://yp.xenophy.com/?p=75

あさのののーと
http://yuki.xenophy.com/?p=188

junji_furuyaのブログ
http://d.hatena.ne.jp/junji_furuya0/20101028/1288222330

地方で活動するweb制作者の日々を綴るblog
http://blog.livedoor.jp/loopus/archives/50161232.html

WebOS Goodies
http://webos-goodies.jp/archives/50481076.html