「部品作成手順」の編集履歴（バックアップ）一覧に戻る

部品作成手順 - (2009/03/27 (金) 19:25:02) のソース

-部品に関してのクラス定義は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);
    	},
    	// 継承したメソッドのオーバーライド 
    	onRender: function(){
	        // 継承元のコードの実行（必須）
	        fpShiiresaki.superclass.onRender.apply(this, arguments);
	    },
		bodyStyle:'padding:0px 0px 0',
		renderTo:'fpShiiresaki',
		border:false,
		width: 300
	});
	//lazy initializationのためのxtypeを登録する
	// itemsのxtypeで指定できるようになります
	Ext.reg('fpShiiresaki', fpShiiresaki);