EXTJS请教！！！

才写这么一点可怜的代码<script type="text/javascript">
Ext.onReady(function (){
var panel=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:800,
height:600,
activeTab:0,
items: [new Ext.Panel({
title:"Cart Operate(CMC100)",
height:30,
html:''
}),new Ext.Panel({
title:"Consume Recodes(CMC106)",
height:30,
html:''
}),new Ext.Panel({
title:"Handset (CMC162)",
height:30,
html:''
})]
});
});
</script>

其实没你想像中的那么难，嵌几个FieldSet就行了
new Ext.form.FieldSet

思路：
1.整体布局可以用tabPanel(标签式)或cardPanel(卡片式)
2.如果是标签式比较简单，如果是卡片式需要在整体上再加三个按钮，分别用于打开对应panel。
3.不管是标签还是卡片，整体panel都包含三个子panel。
4.第一块内容用formPanel，包括fieldset,button,textfield等组合
5.第二块内容用一个border布局的panel，中心为一个gridPanel，右边也可以是一个gridPanel。
6.第三块内容跟第二块类似。
7.第2、3块内容需要设置topToolBar。如果是我，我就选择tabPanel。
难点：第二、三块内容的topToolBar。

第一张图，如何让FieldSet里面的那些控件比如Button，Textfield自左向右排列，而不是自上而下的排列呢？？

里面再用Ext.layout.ColumnLayout 布局就可以横向排列了

对照第一张图，做得很挫，但没办法了。有个下拉框，默认只有一个“COM3”且显示也是这个。不知道怎么实现啊！

代码有谁看下，烦请看看了！
第2，3张还没做完！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CMC Consumption System Demo V1.0</title>
<link rel="stylesheet" type="text/css" href="../scripts/resources/css/ext-all.css">
<script type="text/javascript" src="../scripts/ext-all.js"></script>
<script type="text/javascript" src="../scripts/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function (){
var panel=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:800,
height:600,
activeTab:0,
items: [new Ext.form.FormPanel({
title:"Cart Operate(CMC100)",
height:30,
frame: true,
items: [new Ext.form.FieldSet({
height: 80,
layout: 'table',
items:[new Ext.form.Label({
text:'Port'
}),new Ext.Button({
               text:'Open',
               style:'margin-left: 30px',
               }),new Ext.Button({
               text:'Colse',
               style:'margin-left: 10px'
               }),new Ext.form.Label({
               text:'Please connect CMC100 first.',
               style:'margin-left: 10px'
               })]
}),new Ext.form.FieldSet({
title: 'Init Card',
height: 80,
layout: 'table',
items:[new Ext.Button({
text:'Init Card',
style:'margin-left: 20px'
}),new Ext.Button({
text:'Recycle',
style:'margin-left: 90px'
})]
}),new Ext.form.FieldSet({
title: 'Read SN',
height: 80,
layout: 'table',
items:[new Ext.Button({
text:'Read SN',
style:'margin-left: 20px'
}),new Ext.form.Label({
text:'SN:',
style:'margin-left: 60px'
}),new Ext.form.TextField({
name:'',
style:'margin-left: 10px'
})]
}),new Ext.form.FieldSet({
title: 'Balance',
height: 80,
layout:'table',
items:[new Ext.Button({
text:'Check Balance',
style:'margin-left: 20px'
}),new Ext.form.TextField({
name:'',
style:'margin-left: 60px'
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
})]
}),new Ext.form.FieldSet({
title: 'Recharge',
height: 80,
layout:'table',
items:[new Ext.form.Label({
text:'Please input amount',
style:'margin-left: 20px'
}),new Ext.form.TextField({
name: '',
style:'margin-left: 90px'
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
}),new Ext.Button({
text:'Recharge',
style:'margin-left: 25px'
})]
}),new Ext.form.FieldSet({
title: 'Deduction',
height: 80,
layout:'table',
items:[new Ext.form.Label({
text:'Please inout amount of deduction',
style:'margin-left: 10px'
}),new Ext.form.TextField({
name: '',
style:'margin-left: 25px'
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
}),new Ext.Button({
text:'Deduction',
style:'margin-left: 25px'
})]
})]
}),new Ext.Panel({
title:"Consume Recodes(CMC106)",
height:30,
html:''
}),new Ext.Panel({
title:"Handset (CMC162)",
height:30,
html:''
})]
});
});
</script>
</head>
<body>
</body>
</html>

个人感觉用border布局比较好，如图:

第一张图
在panel上面放个ToolBar,toolBar上面放个formPanel，formpanel使用layout:"column",横向布局
把下拉框（oombo）,按钮都丢上去，设置好宽度，慢慢调吧，多看下api
中文Api3.0这里可以下到
http://download.csdn.net/source/3201641

第一张图中：open按钮是可按的，其他按钮是灰色的。这个灰色怎么设置呢？
new Ext.Button({
text:'Init Card',
style:'margin-left: 20px',
id:'init'
这里面如何添加呢？还有按了open之后open按钮置灰，并且让其他按钮变成可按状态，如何实现啊？？
在open的handler中写Ext.getCmp('init').enable();貌似不管用啊！
求教！！！

求教问题：
new Ext.Button({
text:'Init Card',
style:'margin-left: 20px',
id:'init'
如何让这个按钮置灰啊？还有open按钮按下以后使得open按钮本身置灰，并且让其他按钮处于可按状态
我在它的handler里面写Ext.getCmp('init').enable();貌似不管用啊？咋实现呢？？

图片貌似失效了。我看不到了，早知道当时先down下来看的。

调试易

EXTJS请教！！！

解决方案 »