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);