indexjp @ ウィキ

メニュー

2009-03-31T20:46:54+09:00

**メニュー -[[トップページ]] -[[開発環境]] -[[JavaScript基本]] -[[ExtJS参考]] -[[部品作成手順]] -[[部品使用手順]] ---- // リンクを張るには "[" 2つで文字列を括ります。 // ">" の左側に文字、右側にURLを記述するとリンクになります //**更新履歴 //#recent(20) &link_editmenu(text=ここを編集)

部品作成手順

2009-03-31T20:45:44+09:00

-部品に関してのクラス定義はctlIndex.jsに一括記載するものとする -以下の部品を作成してみる※イメージ図 #image(fpShiiresaki.jpg,left) -まずは左側の項目の仕入先ラベルのクラスを作成します #image(lblShiiresaki.jpg,left) -ソースコード例 //-----仕入先テキスト（タイトル部） // Ext.form.TextField クラスの継承 var lblShiiresakiTitle = Ext.extend(Ext.form.TextField,{ // Ext.form.TextFieldのオーバーライド // コンポーネントの初期化 // itemsに関する設定はこちらで行うこと！ initComponent: function(){ // 継承元のコード実行(必須) lblShiiresakiTitle.superclass.initComponent.call(this); }, hideLabel:true, // 見出しラベルの非表示 readOnly:true, // テキスト変更不可 renderTo:'lblShiiresakiTitle', // バインド名 style:'{background:#C3DAF9;text-align:center;}', // スタイルシートのように指定 tabIndex:-1, //タブ遷移しない value: '仕入先', width: 50 }); // lazy initializationのためのxtypeを登録する // itemsのxtypeで指定できるようになります Ext.reg('lblShiiresakiTitle', lblShiiresakiTitle); -次に真ん中の仕入先コード入力項目のクラスを作成します #image(txtShiiresakiCD.jpg,left) -ソースコード例 //-----仕入先コードテキスト // Ext.form.TextField クラスの継承 var txtShiiresakiCD = Ext.extend(Ext.form.TextField,{ // Ext.form.TextFieldのオーバーライド // コンポーネントの初期化 // itemsに関する設定はこちらで行うこと！ initComponent: function(){ // 継承元のコード実行(必須) txtShiiresakiCD.superclass.initComponent.call(this); }, grow:false, //テキストの文字数の長さによって幅を変更するか hideLabel:true, // 見出しラベルの非表示 maxLength:4, // 最大文字数 renderTo:'txtShiiresakiCD', //バインド名 selectOnFocus:true, //選択時に文字列を選択状態にする style:'{text-align:center;}', //スタイル value: '0001', width: 50 }); // lazy initializationのためのxtypeを登録する // itemsのxtypeで指定できるようになります Ext.reg('txtShiiresakiCD', txtShiiresakiCD); -次に真ん中のボタンのクラスを作成します #image(btnShiiresaki.jpg,left) -ソースコード例 //-----仕入先検索ボタン // Ext.Button クラスの継承 var btnShiiresaki = Ext.extend(Ext.Button,{ // Ext.Buttonのオーバーライド // コンポーネントの初期化 // itemsに関する設定はこちらで行うこと！ initComponent: function(){ // 継承元のコード実行(必須) btnShiiresaki.superclass.initComponent.call(this); }, renderTo: 'btnShiiresaki', //バインド名 text:'■' }); // lazy initializationのためのxtypeを登録する // itemsのxtypeで指定できるようになります Ext.reg('btnShiiresaki', btnShiiresaki); -次に右端の仕入先名称ラベルのクラスを作成します #image(lblShiiresakiName.jpg,left) -ソースコード例 //-----仕入先名称テキスト // Ext.form.TextField クラスの継承 var lblShiiresakiName = Ext.extend(Ext.form.TextField,{ // Ext.form.TextFieldのオーバーライド // コンポーネントの初期化 // itemsに関する設定はこちらで行うこと！ initComponent: function(){ // 継承元のコード実行(必須) lblShiiresakiName.superclass.initComponent.call(this); }, grow:false, hideLabel:true, readOnly:true, renderTo: 'lblShiiresakiName', style:'{background:#CCCCCC;text-align:left;}', tabIndex:-1, value: 'テスト仕入先', width: 200 }); // lazy initializationのためのxtypeを登録する // itemsのxtypeで指定できるようになります Ext.reg('lblShiiresakiName', lblShiiresakiName); -作成したクラスを元にパネルを構成します -ソースコード例 //-----仕入先パネル // Ext.FormPanel クラスの継承 // 継承したメソッドのオーバーライド var fpShiiresaki = Ext.extend(Ext.FormPanel,{ // コンポーネントの初期化 // itemsの設定はこちらで行うこと！ initComponent: function(){ this.items = [{ layout:'table', //レイアウト種別 layoutConfig: { columns: 4 //４列指定 }, items:[ new lblShiiresakiTitle({ // FormPanelのItemsに設定するときはrenderToを無効にする renderTo:'' }) , new txtShiiresakiCD({ // FormPanelのItemsに設定するときはrenderToを無効にする renderTo:'' }) , new btnShiiresaki({ // FormPanelのItemsに設定するときはrenderToを無効にする renderTo:'' }) , new lblShiiresakiName({ // FormPanelのItemsに設定するときはrenderToを無効にする renderTo:'' }) ] }]; // 継承元のコード実行(必須) fpShiiresaki.superclass.initComponent.call(this); }, bodyStyle:'padding:0px 0px 0', renderTo:'fpShiiresaki', border:false, width: 300 }); //lazy initializationのためのxtypeを登録する // itemsのxtypeで指定できるようになります Ext.reg('fpShiiresaki', fpShiiresaki); 以上で部品化の記述は終わりですさらにこの作成した部品を呼び出すmain.jsを作成します。 -ソースコード例 Ext.onReady(function(){ // フォームに配置するアイテム var fp = new fpShiiresaki({ }); fp.render(Ext.getBody()); }); 動かす準備ができたのでhtmlを記述してみます。 -ソースコード例仕入一覧

読み込むjsファイルは自身の環境によってディレクトリを変更してください。

開発環境

2009-03-31T20:44:43+09:00

**開発環境設定 -実行環境設定 --実行環境：[[FireFox>http://mozilla.jp/firefox/]] --デバッグプラグイン:[[FireBug>http://getfirebug.com/jp.html]] まずはJavaScriptの実行環境を整えます。 FireFoxをインストール後、 FireFoxを起動し、そこからFireBugのサイトを開き、FireBugをインストールしてください。 -ソース編集 --ソース編集：[[Aptana Studio>http://www.aptana.com/studio]] --Aptana Studioのインストール方法 Aptana Studioダウンロード（http://www.aptana.com/studio/download）より・Installation Type:StandAlone ・Operating System:Windows ・Download Type:FullInstarrer を選択し、ダウンロード後、セットアップを実行する -Aptana Studioの日本語化方法 --Pleiades：[[Pleiades>http://mergedoc.sourceforge.jp/]] 1.「pleiades_x.x.x.zip」を解凍し、「plugins」「features」のフォルダの中身をAptana Studioが格納されたフォルダにある同名のフォルダ内にコピーする。 2．Aptana Studioのインストール先のフォルダ内にある「AptanaStudio.ini」の最終行に次の1行を追加する。 -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=default.splash ※参考：http://www.thinkit.co.jp/article/47/4/2.html -Extのインストール --ExtのSDK：http://extjs.com/products/extjs/download.php 2009年3月30日現在ExtJS2.2.1SDKがダウンロードできます。 --ダウンロード後の作業 public_htmlというフォルダを作成し、そちらへ解凍したファイルを格納してください。格納後、extx.x.xとなっているフォルダ名をextへ変更してください。 ※参考：http://www.ext-japan.org/index.php?option=com_content&view=article&id=53:extjs&catid=37:extjs&Itemid=59 --雛形hmtlファイルの作成雛形今後自社の標準化部品に関してはctlIndex.jsにそれらの標準化部品を呼び出して使用するjsファイルは個別に記載していくとする。

ExtJS参考

2009-03-26T10:24:41+09:00

-[[ExtJapan.org>http://www.ext-japan.org/]] --ExtJSの基礎とJavaScriptの基本について記載されています -[[Ext2.0APIドキュメント>http://docs.ext-japan.org/docs/]] --Ext2.0のAPIドキュメントが日本語化されています。 -[[ExtJapan>http://docs.ext-japan.org/]] --Extのファンサイト、Ext JS例文辞典から飛べるリンク先のサンプルが大変参考になります。

JavaScript基本

2009-03-26T09:49:50+09:00

[[ExtJapan⇒ExtJS入門⇒JavaScriptの基本>http://www.ext-japan.org/index.php?option=com_content&view=category&layout=blog&id=36&Itemid=58]]

トップページ

2009-03-26T09:31:31+09:00

**@wikiへようこそ -ウィキはみんなで気軽にホームページ編集できるツールです。 -このページは自由に編集することができます。 -メールで送られてきたパスワードを用いてログインすることで、各種変更（サイト名、トップページ、メンバー管理、サイドページ、デザイン、ページ管理、等）することができます **まずはこちらをご覧ください。 -[[@wikiの基本操作>http://atwiki.jp/guide/category2.html]] -[[用途別のオススメ機能紹介>http://atwiki.jp/guide/category22.html]] -[[@wikiの設定/管理>http://atwiki.jp/guide/category6.html]] **分からないことは？ -[[@wiki ご利用ガイド>http://atwiki.jp/guide/]] -[[よくある質問>http://atwiki.jp/guide/category1.html]] -[[無料で会員登録できるSNS内の@wiki助け合いコミュニティ>http://sns.atfb.jp/view_community2.php?no=112]] -[[@wiki更新情報>http://www1.atwiki.jp/guide/pages/264.html]] -[[@wikiへのお問合せフォーム>http://atwiki.jp/helpdesk]] 等をご活用ください **@wiki助け合いコミュニティの掲示板スレッド一覧 #atfb_bbs_list(112) **その他お勧めサービスについて -[[大容量１Ｇ、PHP/CGI、MySQL、FTPが使える無料ホームページは@PAGES>>http://atpages.jp/]] -[[無料ブログ作成は@WORDをご利用ください>>http://atword.jp/]] -[[2ch型の無料掲示板は@chsをご利用ください>>http://atchs.jp/]] -[[フォーラム型の無料掲示板は@bbをご利用ください>>http://atbb.jp/]] -[[お絵かき掲示板は@paintをご利用ください>>http://atpaint.jp/]] -[[その他の無料掲示板は@bbsをご利用ください>>http://atbbs.jp/]] -[[無料ソーシャルプロフィールサービス @flabo(アットフラボ)>>http://sns.atfb.jp]] **おすすめ機能 -[[気になるニュースをチェック>http://atwiki.jp/guide/17_174_ja.html]] -[[関連するブログ一覧を表示>http://atwiki.jp/guide/17_161_ja.html]] **その他にもいろいろな機能満載！！ -[[@wikiプラグイン>http://atwiki.jp/guide/category17.html]] -[[@wiki便利ツール>http://atwiki.jp/guide/category32.html]] -[[@wiki構文>http://atwiki.jp/guide/category16.html]] -[[@wikiプラグイン一覧>http://www1.atwiki.jp/guide/pages/264.html]] -[[まとめサイト作成支援ツール>http://atwiki.jp/matome/]] **バグ・不具合を見つけたら？要望がある場合は？お手数ですが、メールでお問い合わせください。

右メニュー

2009-03-26T09:31:31+09:00

**更新履歴 #recent(20) &link_editmenu2(text=ここを編集)

プラグイン/ニュース

2009-03-26T09:31:31+09:00

* ニュース @wikiのwikiモードでは #news(興味のある単語) と入力することで、あるキーワードに関連するニュース一覧を表示することができます詳しくはこちらをご覧ください。＝＞http://atwiki.jp/guide/17_174_ja.html ----- たとえば、#news(wiki)と入力すると以下のように表示されます。 #news(wiki)

まとめサイト作成支援ツール

2009-03-26T09:31:31+09:00

* まとめサイト作成支援ツールについて @wikiには[[まとめサイト作成を支援するツール>>http://atwiki.jp/matome/]]があります。また、 #matome_list と入力することで、注目の掲示板が一覧表示されます。利用例）#matome_listと入力すると下記のように表示されます #matome_list

プラグイン/編集履歴

2009-03-26T09:31:31+09:00

* 更新履歴 @wikiのwikiモードでは #recent(数字) と入力することで、wikiのページ更新履歴を表示することができます。詳しくはこちらをご覧ください。＝＞http://atwiki.jp/guide/17_117_ja.html ----- たとえば、#recent(20)と入力すると以下のように表示されます。 #recent(20)