et
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"
// shorthand
var mytree = new Ext.tree.TreePanel({
el : "container",
animate : true,
//title : "Extjs",
collapsible : false,
enableDD : true,
enableDrag : true,
rootVisible : true,
autoScroll : true,
//autoHeight : true,
width : 255,
height : 300,
lines : false
});
// 根节点
var root = new Ext.tree.TreeNode({
id : "root",
text : "服务器/虚拟机",
checked : false
});
for (var j = 1; j < 5; ++j) {
var node = root.appendChild(new Ext.tree.TreeNode({
text : '服务器_A' + j,
allowDrag : false,
checked : false
}));
for (var n = 1; n < 4; ++n) {
node.appendChild(new Ext.tree.TreeNode({
text : '虚拟机' + n,
allowDrag : false,
checked : false
}));
}
}
mytree.setRootNode(root);
mytree.render();
mytree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child,
checked);
});
}, mytree);
mytree.expand();
var formPanel=new Ext.form.FormPanel({
applyTo : 'example',
frame:false,
width :1010,
height : 560,
labelWidth:80,
labelAlign:'left',
border : false,
//monitorValid:true,
items:[{
layout:'column',
//title:'服务器虚拟机迁移基本信息',
xtype:'fieldset',
border : false,
autoHeight:true,
items:[{
border:false,
defaults:{xtype:"radio",width:50,labelSeparator:''},
columnWidth:.15,
layout:'form',
items:[
{
id:'vm',
name:'vm'
},{
xtype:"textfield",
labelSeparator:'',
hidden : true
},{
id : 'vms',
name:'vms'
},{
xtype:"textfield",
labelSeparator:'',
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
hidden : true
}
]
},{
border:false,
defaults:{xtype:"textfield",width:200},
columnWidth:.35,
layout:'form',
items:[
{fieldLabel:'源服务器',
name:'bean.name',//2
allowBlank:false,
maxLength:225,
//regex:/^(?!_)(?!.*?_$)[ a-zA-Z0-9_/u4e00-/u9fa5 ]+$/,//汉字,字母,数字,空格
regexText:'您输入的信息可能包括不合法字符,请重新输入!',
blankText:'企业名称不能为空!',
maxLengthText:'输入信息过长,请重新输入!'
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},
new Ext.form.ComboBox({
fieldLabel: '待迁移',
name:'bean.budgetaryLevels',//6
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : [
['1', '虚拟机1'],
['2', '虚拟机2'],
['3', '虚拟机3'],
['4', '虚拟机4']
]
}),
valueField:'abbr',
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择虚拟机',
selectOnFocus:true,
allowBlank:false,
//readOnly:true,
blankText:'虚拟机不能为空!' ,
editable : false,
disable:true
}),{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},{
xtype:"label",
html:'<font size = 2px>源服务器:</font>'
},mytree,{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},
{
xtype:"label",
html:'<font size = 2px>注:XXX目标服务器</font>'
}
]
},{
border:false,
defaults:{xtype:"textfield",width:200},
columnWidth:.35,
layout:'form',
items:[
{fieldLabel:'目标服务器IP',//3
name:'bean.organizationCode',
maxLength:225,
emptyText:'目标服务器IP',//输入框的提示语句
maxLengthText:'目标服务器IP,请重新输入!',
allowBlank:false,
blankText:'目标服务器IP不能为空!'}
,{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},
new Ext.form.ComboBox({
fieldLabel: '待迁移',
name:'bean.budgetaryLevels',//6
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : [
['1', '虚拟机1'],
['2', '虚拟机2'],
['3', '虚拟机3'],
['4', '虚拟机4']
]
}),
valueField:'abbr',
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'待迁移虚拟机',
selectOnFocus:true,
allowBlank:false,
//readOnly:true,
blankText:'待迁移虚拟机不能为空!' ,
editable : false,
disable:true
}),{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.35,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
border : true,
columnWidth:.35,
hidden : true
},{
xtype:"label",
style : "margin : 0 0 0 83",
html:'<font size = 2px>目标服务器:</font>'
},{
xtype:"textarea",
labelSeparator:'',
columnWidth:.25,
width : 255,
height :300
}
]
},{
defaults:{xtype:"button",width:50,labelSeparator:''},
border:false,
columnWidth:.15,
layout:'form',
items:[
{
id:'buttons',
text:'迁移'
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.20,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
id : 'sbu',
text:'搜索'
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
xtype:"textfield",
labelSeparator:'',
columnWidth:.25,
hidden : true
},{
id:'sbs',
text:'迁移'
}
]}]
}]
});
});
</script>
<body>
<div id="container"></div>
<div id="example" style="padding-top:50px;"></div>
</body>
</html>