Ext创建对象实例

方式一：

小型的项目中

main.js文件中

Ext.onReady(function(){

??? var reader = new Ext.data.JsonReader({},[
??????? {name: 'text', type: 'string'},
??????? {name: 'number', type: 'float'},
??????? {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'},
??????? {name: 'combo', type: 'int'}
??? ]);

??? var form = new Ext.form.FormPanel({
??????? labelAlign: 'right',
??????? title: 'form',
??????? labelWidth: 50,
??????? buttonAlign: 'center',
??????? frame:true,
??????? //提交url
??????? url: 'form2.jsp',
??????? width: 280,
??????? reader: reader,

??????? items: [{
??????????? xtype: 'textfield',
??????????? fieldLabel: '文本',
??????????? name: 'text'
??????? },{
??????????? xtype: 'numberfield',
??????????? fieldLabel: '数字',
??????????? name: 'number'
??????? },{
??????????? xtype: 'datefield',
??????????? fieldLabel: '日期',
??????????? name: 'date'
??????? },{
??????????? xtype: 'combo',
??????????? fieldLabel: '下拉',
??????????? name: 'combo',
??????????? store: new Ext.data.SimpleStore({
??????????????? fields: ['value', 'text'],
??????????????? data : [
??????????????????? [1, 'text1'],
??????????????????? [2, 'text2'],
??????????????????? [3, 'text3']
??????????????? ]
??????????? }),
??????????? mode:'local',
??????????? triggerAction: 'all',
??????????? valueField: 'value',
??????????? displayField: 'text'
??????? }],
??????? buttons: [{
??????????? text: '提交',
??????????? handler: function() {
??????????????? form.getForm().submit();
??????????? }
??????? }, {
??????????? text: '读取',
??????????? handler: function() {
??????????? ?//读取url
??????????????? form.getForm().load({url:'10-01.txt'});
??????????? }
??????? }]
??? });
??? form.render("form");

});?

方式二：

大型的项目

main.js文件中

Ext.onReady(function() {
??????????? var myPanel = new FormPanel({
//??????????????????????? detailObjectId:null
??????????? ?detailObjectId:'wl'
??????????????????? });
??????????? myPanel.render(Ext.getBody());
??????? });

FormPanel = function(config) {
?FormPanel.superclass.constructor.call(this, Ext.apply(config,{
???????? detailObjectId:config.detailObjectId
???????? }));
};

在formpanel.js文件中

Ext.extend(FormPanel,Ext.form.FormPanel, {
?labelAlign: 'right',
??? title: 'form',
??? labelWidth: 50,
??? buttonAlign: 'center',
??? frame:true,
??? url: 'form2.jsp',
??? width: 280,
??? reader: this.reader,
??? buttons: [{
??????? text: '提交',
??????? handler: function() {
//??????????? form.getForm().submit();
??????? ?alert('tijiao');
??????? }
??? }, {
??????? text: '读取',
??????? handler: function() {
??????? ?//读取url
??????? ?alert('duqu');
//??????????? Ext.getCmd('form').getForm().load({url:'10-01.txt'});
??????? }
??? }],
??? initform:function(){
??? ?if(this.detailObjectId!=null){
//??? ??新增detailObjectId为空，修改detailObjectId不为空
??? ??var _self = this;
??? ??alert("modify"+this.detailObjectId);
//??? ??要是修改，就初始化界面，通过传递detailObjectId，调用dwr，ajax从后台数据库中获取数据。
//???执行页面初始化操作
??? ??
??? ?}else{
??? ??alert("new");
??? ?}
??? ?
??? },
??? initComponent : function() {
??? ?var reader = new Ext.data.JsonReader({},[
??? ????????????????????????????????????????? {name: 'text', type: 'string'},
??? ????????????????????????????????????????? {name: 'number', type: 'float'},
??? ????????????????????????????????????????? {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'},
??? ????????????????????????????????????????? {name: 'combo', type: 'int'}
??? ????????????????????????????????????? ]);
??????? this.items=[{
??????????? xtype: 'textfield',
??????????? fieldLabel: '文本',
??????????? name: 'text'
??????? },{
??????????? xtype: 'numberfield',
??????????? fieldLabel: '数字',
??????????? name: 'number'
??????? },{
??????????? xtype: 'datefield',
??????????? fieldLabel: '日期',
??????????? name: 'date'
??????? },{
??????????? xtype: 'combo',
??????????? fieldLabel: '下拉',
??????????? name: 'combo',
??????????? store: new Ext.data.SimpleStore({
??????????????? fields: ['value', 'text'],
??????????????? data : [
??????????????????? [1, 'text1'],
??????????????????? [2, 'text2'],
??????????????????? [3, 'text3']
??????????????? ]
??????????? }),
??????????? mode:'local',
??????????? triggerAction: 'all',
??????????? valueField: 'value',
??????????? displayField: 'text'
??????? }];
??????? this.initform();
??????? FormPanel.superclass.initComponent.call(this);
??? }
});
Ext.reg('FormPanel', FormPanel);