indexjp @ ウィキ
indexjp @ ウィキ

部品作成手順

  • 部品に関してのクラス定義はctlIndex.jsに一括記載するものとする

  • 以下の部品を作成してみる※イメージ図

  • まずは左側の項目の仕入先ラベルのクラスを作成します

  • ソースコード例
//-----仕入先テキスト（タイトル部）
// 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);

  • 次に真ん中の仕入先コード入力項目のクラスを作成します

  • ソースコード例
//-----仕入先コードテキスト
// 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);


  • 次に真ん中のボタンのクラスを作成します

  • ソースコード例
//-----仕入先検索ボタン
// 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);

  • 次に右端の仕入先名称ラベルのクラスを作成します

  • ソースコード例

//-----仕入先名称テキスト
// 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を記述してみます。
  • ソースコード例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>仕入一覧</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all.js"></script>
    <script type="text/javascript" src="../ext/source/locale/ext-lang-ja.js"></script>
    <script type="text/javascript" src="../script/test4/ctlIndex.js"></script>
    <script type="text/javascript" src="../script/test4/main.js"></script>
</head>
<body>
    <div id="fpShiiresaki"></div>
</body>
</html>

読み込むjsファイルは自身の環境によってディレクトリを変更してください。
「部品作成手順」をウィキ内検索
最終更新：2009年03月31日 20:45