Question

extjs 创建了一个formPanel作为一个gridpanel的Tbar 在多个Tab的情况下，formPanel的布局会变得混乱

formPanel代码:
var searchPanelR=new Ext.FormPanel({
height:40,
// frame:true,
id:'receiveSearchForm',
frame:false,
border:false,
layout : 'hbox',
layoutConfig:{padding:"5",
align:"middle"
},
defaults : {
xtype : 'label',
margins:{top:0,right:4,bottom:4,left:4}
},
url:_ctx.base+'/info/listShortMessage.do',
items:[
{
text : '类型'
},{
xtype : 'combo',
store : msgTypeStore,
displayField : 'vl',
valueField : 'id',
hiddenName : 'typeid',
editable : false,
triggerAction : 'all'
}, {
text : '发送人'
}, {
xtype : 'textfield',
name : 'shortMessage.sender'
},{
text:'从'
}
,{
xtype:'datefield',
format:'Y-m-d',
name:'from',
editable : false
},
{
text:'到'
},
{
xtype:'datefield',
format:'Y-m-d',
name:'to',
editable : false
},{
text:'查询',
iconCls:'search',
xtype : 'button',
handler:function(){
var receiveGrid = Ext.getCmp('ReceiveMessage');
searchPanelR.getForm().submit({
waitMsg:'正在提交查询信息',
success: function(searchPanelR, action){
var receiveStore = receiveGrid.getStore();
var rsText=action.response.responseText.replace('success:true,',"");
var result=Ext.util.JSON.decode(rsText);
receiveStore.loadData(result,false);
},
failure:function(searchPanelR, action){
alert('something wrong');
}
});
}
},{
text:'重置',
xtype : 'button',
iconCls:'reset',
handler:function(){
searchPanelR.getForm().reset();
}
},{
text:'标记为已读',
xtype : 'button',
iconCls:'btn-readed',
handler:function(){
searchPanelR.getForm().reset();
}
},{
iconCls : 'btn-del',
text : '删除信息',
xtype : 'button',
handler : function() {

var grid=Ext.getCmp("ReceiveMessage");

var selectRecords=grid.getSelectionModel().getSelections();

if(selectRecords.length==0){
Ext.Msg.alert("信息","请选择要删除的记录！");
return;
}
var ids=Array();
for(var i=0;i<selectRecords.length;i++){
ids.push(selectRecords[i].data.roleId);
}

MessageView.removeReceiveMessage(ids);
}
}
]
});
在刷新后页面就变成这样了

Answer 1

单个panel的布局和tab没关系的，每个tab就相当于一个panel。
单看form看不出什么问题，提供几个猜测吧
1. 调整一下各个控件的高度。可能是新加的控件把空间挤没了，tbar没法全部渲染出来
2. 别放在tbar里，单独放出来和gridpanel一起布局
3. 是不是其他tab调用了同一个tbar，这种情况会出现很多意想不到的事

Answer 2

api上面都有的
el是把整个grid渲染到哪个dom里面，可以是id ，HTMLElement,EXT.Element
ds是grid的数据源，DataStore的简称
cm是ColumModel，就是配置列要怎么显示
sm是selectionModel，选择的模式
除了el其他在API中都能找到，api中的renderTo和el作用类似