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