PDA

View Full Version : [Solved]HTML???????Form??????



kuro
12 Oct 2009, 10:45 AM
?????????????HTML??????????????????????????????????

JavaScript:

var myTest = {

// ?????HTML??????????
html : '<div id="form1">'
+ '<table bgcolor="#888888" cellspacing="1" cellpadding="0" width="100%">'
+ '<tr>'
+ '<td bgcolor="#DDDDDD">item1</td>'
+ '<td bgcolor="#FFFFFF"><input type="text" id="item1" /></td>'
+ '</tr>'
+ '<tr>'
+ '<td bgcolor="#DDDDDD">item2</td>'
+ '<td bgcolor="#FFFFFF"><input type="text" id="item2" /></td>'
+ '</tr>'
+ '</table>'
+ '<input type="button" id="item3" />'
+ '</div>',

// ???????????????HTML????
initform : function(){
var formPanel = new Ext.FormPanel({
title: '????',
id: 'testForm',
frame: true,
width: 400,
html: myTest.html,
applyTo: 'container'
});
},

// ????????????
textfield : function(id){
var field = new Ext.form.TextField({
allowBlank: false,
msgTarget: 'under',
blankText: '??????',
applyTo: id
});
},

// ??????
buttonfield : function(id){
var field = new Ext.Button({
text: '???',
applyTo: id
});
}

};

Ext.onReady(function(){
myTest.initform(); // ????????1?
myTest.textfield('item1'); // ???????????2?
myTest.textfield('item2'); // ???????????3?
myTest.buttonfield('item3'); // ?????4?
});??
HTML:

<body>
<div id="container"></div>
</body>????????1????????????????????????????

???????????2??3?????????????????????????msgTarget:'under'?
?????????

?????4????????????????????applyTo:'item3'????
?????????????

??????????????????????????????????????

yuki
12 Oct 2009, 6:03 PM
???????????2??3?????????????????????????msgTarget:'under'?
?????????

?????4????????????????????applyTo:'item3'????
?????????????


??????????????????????? (http://www.extjs.com/forum/showthread.php?t=62524)????????????????applyTo???????????????????.x-form-element??????.x-form-field-wrap????div???????????????????????????????

????????????????????? (http://www.extjs.com/forum/showthread.php?t=77024)???????????Ext.Button????applyTo??????????input????????????Ext.Button??????????????input???????div????????applyTo?????renderTo??????????????????????????????override????????

kuro
12 Oct 2009, 8:12 PM
????????????????????????????
??????????????????????????

?????????????????????

var myTest = {

// ?????HTML??????????
html : '<div id="form1">'
+ '<table bgcolor="#888888" cellspacing="1" cellpadding="0" width="100%">'
+ '<tr>'
+ '<td bgcolor="#DDDDDD">item1</td>'
+ '<td bgcolor="#FFFFFF"><input type="text" id="item1" /></td>'
+ '</tr>'
+ '<tr>'
+ '<td bgcolor="#DDDDDD">item2</td>'
+ '<td bgcolor="#FFFFFF"><input type="text" id="item2" /></td>'
+ '</tr>'
+ '</table>'
+ '<div id="item3" />'
+ '</div>',

// ???????????????HTML????
initform : function(){
var formPanel = new Ext.FormPanel({
title: '????',
id: 'testForm',
frame: true,
width: 400,
html: myTest.html,
applyTo: 'container'
});
},

// ????????????
textfield : function(id){
var field = new Ext.form.TextField({
allowBlank: false,
msgTarget: 'under',
blankText: '??????',
applyTo: id
});
field.getEl().wrap({ cls: "x-form-field-wrap" });
},

// ??????
buttonfield : function(id){
var field = new Ext.Button({
text: '???',
renderTo: id
});
}

};

Ext.onReady(function(){
myTest.initform(); // ????????1?
myTest.textfield('item1'); // ???????????2?
myTest.textfield('item2'); // ???????????3?
myTest.buttonfield('item3'); // ?????4?
});