<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" language="javascript">
Ext.onReady(function(){
var test='';
test+=' <table width="200" border="0">';
test+=' <tr>';
test+=' <td>Name: <input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td>Guoji:<input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td colspan="2" rowspan="2">';
test+=' <input type="image" name="imageField" src="../resources/images/default/dd/drop-add.gif"> ';
test+=' </td>';
test+=' </tr>';
test+=' <tr>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' <td><input name="radiobutton" type="text" value="radiobutton"></td>';
test+=' </tr> ';
test+=' </table>';
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'Container',
layout:'form',
width:500,
height:200,
items:[
{title:'',html:test}
]
}
);
});
</script>
<script type="text/javascript">
Ext.onReady(function() {
var form = new Ext.FormPanel({
title: "复杂Form布局示例()",
width: 640,
height: 400,
renderTo: Ext.getBody(),
labelWidth: 80,
labelAlign: "top",
frame: true,
items: [{
layout: "column",
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "A1",
anchor: "90%"
}
}, {
columnWidth: 0.5,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "A2",
anchor: "90%"
}
}]
}, { items: [{
layout: "column",
items: [{
columnWidth: 0.33,
layout: "form",
items: {
xtype: "datefield",
fieldLabel: "B1",
anchor: "90%"
}
}, {
columnWidth: 0.33,
layout: "form",
items: [{
xtype: "radiogroup",
fieldLabel: "B2",
// columns: ["33%", "33%", "33%"],
// items: [{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 },
// { boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true },
// { boxLabel: '好人', name: 'rb-auto', inputValue: 3}]
//下面也是一种解决办法,不管radiogroup或是下面的写法,都很难保证在所有浏览器下效果一致
xtype: "panel",
layout: "column",
fieldLabel: "球类",
isFormField: true,
items: [{
columnWidth: 0.33,
xtype: "checkbox",
boxLabel: "足球",
name: "",
anchor:"100%"
}, {
columnWidth:0.33,
xtype:"checkbox",
boxLabel:"蓝球",
name:"",
anchor: "100%"
}, {
columnWidth: 0.33,
xtype: "checkbox",
boxLabel: "乒乓球",
name: "tyy",
anchor: "100%"
}]
}]
}, {
columnWidth: 0.33,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "B3",
inputType: "password",
anchor: "90%"
}
}]
}]
}, {
xtype: "htmleditor",
fieldLabel: "详细内容",
height: 200,
anchor: "100%"
}]
, buttons: [{ text: "Save" }, {text:"cancel"}]
});
});
</script>
</head>
<body>
<div id="paneldiv"/>
<table width="200" border="1">
<tr>
<td><label>
<input name="radiobutton" type="radio" value="radiobutton">
</label></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td colspan="2" rowspan="2">
<input type="image" name="imageField" src="../resources/images/default/dd/drop-add.gif">
</td>
</tr>
<tr>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
</tr>
<tr>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td> </td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
</tr>
<tr>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
<td><input name="radiobutton" type="radio" value="radiobutton"></td>
</tr>
</table>
</body>
</html>
另請參考:http://www.3648.com/article/sort02/sort023/sort059/info-8650_3.html