「部品作成手順」の編集履歴（バックアップ）一覧はこちら
「部品作成手順」(2009/03/31 (火) 20:45:44) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
-部品に関してのクラス定義は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を記述してみます。
-ソースコード例
<!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ファイルは自身の環境によってディレクトリを変更してください。
-部品に関してのクラス定義は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を記述してみます。
-ソースコード例
<!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ファイルは自身の環境によってディレクトリを変更してください。
