サラリーマンのすらすらＩＴ日記

IT関連を中心とした日々を綴ります。

2010/05/19

Ext JS－FormPanel

今回はFormPanelをやってみました。それほど難しくないにもかかわらず、意外にもまだやったことがなかったのです。
「Learning Ext JS」を参考にしました。


var kihonJoho = new Ext.FormPanel({
    items: [
        {xtype: 'textfield', fieldLabel: '担当者', name: 'tantosha', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '担当部署', name: 'tantobusho', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '発注者', name: 'hachusha', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '受注金額', name: 'juchukingaku', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '工　期', name: 'kokiStart', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '', name: 'kokiEnd', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '実施期間', name: 'jishiStart', readOnly: true}
        ,{xtype: 'textfield', fieldLabel: '', name: 'jishiEnd', readOnly: true}
        ,{xtype: 'textarea', fieldLabel: '計画履歴', name: 'keikakurireki', width: 125, height: 80, readOnly: true}
        ,{xtype: 'textarea', fieldLabel: '特記事項', name: 'tokkijiko', width: 125, height: 150, readOnly: true}
    ]
    ,renderTo: Ext.getBody()
});

問題はtextfieldにデータを書き込む方法。Ext JSのAPI Documentationを見ると、textfieldにitemIdをセットして云々と書かれているのですが、どうもうまくいきません。最後に「Learning Ext JS」に戻ってみると、書いてありました。


var kihonJohoForm = kihonJoho.getForm();
kihonJohoForm.findField('tantosha').setValue('田中');
kihonJohoForm.findField('tantobusho').setValue('本社');
kihonJohoForm.findField('hachusha').setValue('△△工事事務所');
kihonJohoForm.findField('juchukingaku').setValue('1,000,000');
kihonJohoForm.findField('kokiStart').setValue('2010年 4月 1日');
kihonJohoForm.findField('kokiEnd').setValue('2010年10月31日');
kihonJohoForm.findField('jishiStart').setValue('2010年 4月 1日');
kihonJohoForm.findField('jishiEnd').setValue('2010年10月31日');
kihonJohoForm.findField('keikakurireki').setValue('2010年 4月12日\r\n2010年 3月24日');
kihonJohoForm.findField('tokkijiko').setValue('Ext JSはすばらしい。');

これでよさそうです。

こんな感じです。