EXT gridPanel 表头不出现问题

Question

我用EXT 写了一个表格，我想要的效果是这样：
但是最后得到的是这样的：
就是没有出现表头，麻烦各位老大给小弟看看，下边是代码，谢谢！var reportGridStore;
var reportPageSize = 9;
function initReportGrid(){
reportGridStore.load({params:{start:0, limit:reportPageSize}});
}
var reportGridUri = path+"/notice/initReportGrid.action";
reportGridStore = new Ext.data.JsonStore({
root:"rows", 
totalProperty:"totalCount", 
idProperty:"id", 
remoteSort:true, 
fields:[
{name:"b_vou_id"}, 
{name:"toctrlid"}, 
{name:"budget_adjust"}, 
{name:"create_date"}
], 
proxy:new Ext.data.HttpProxy({url:reportGridUri})
});
reportGridStore.setDefaultSort("create_date", "DESC");

var reportGridBar = new Ext.PagingToolbar({
pageSize:nvPageSize, 
text: '刷新',
store:reportGridStore, 
displayInfo:true, 
displayMsg: '分页{0} - {1} of {2}'
});var reportGrid = new Ext.grid.GridPanel({
region:'center',
width:allWidth*0.48,
height:allHeight*0.51,
store: reportGridStore,
stripeRows: true,
autoscoll:true,
header: true,
disableSelection:true,
loadMask: true,
bbar: reportGridBar,
viewConfig:{forceFit:true},
columns:[
{header: "明细ID", width: 0.2*allWidth, sortable: true, dataIndex: 'b_vou_id'},
{header: "额度ID", width: 0.12*allWidth, sortable: true, dataIndex: 'toctrlid'},
{header: "调整类型", width: 0.12*allWidth, sortable: true, dataIndex: 'budget_adjust'},
{header: "创建时间", width: 0.12*allWidth, sortable: true, dataIndex: 'create_date'}
]
});var reportPanel = new Ext.Panel({
id : 'report',
layout : 'border',
title : '报表信息',
height : allHeight * 0.51,
bodyStyle : 'background-color:#dfe8f6',
items : [reportGrid]
});
initReportGrid();
ExtJSgridPanel表头

Answer 1

测试了，你的代码没有问题，就是不知道你的  reportPanel 组件render去了哪里，你单独将这段代码抽出来这样测测应该就有台头显示了。
我还将你的allWidth,allHieght变量设置成100.
Ext.onReady(function(){
        reportPanel //你设计的组件引用
new Ext.Viewport({
layout:'fit',
items:[reportPanel]
})

});

Answer 2

render是用来做一些特殊显示的吧，不用应该也是可以的了那个脚本没问题的话，那个没显示是怎么回事呢

Answer 3

台头显不显示，可以用属性控制的，API上有详细的解释，但是你的设置没有问题，我在本地用你的源码测试了，放在viewport里面显示出来的效果是有台头的。如果你不用render，就必须要把你的组件放在viewport里，让他来处理渲染。

Answer 4

我在我那环境直接加了你说的这个Ext.onReady(function(){
        new Ext.Viewport({
            layout:'fit',
            items:[reportPanel]
        })
});
也还是没有

Answer 5

你在GridPanel里重新设置下 hideHeaders:false
如果还不行，下面是我的测试代码，修改的已经用//**标记出来，可以直接运行看效果var reportGridStore;
var reportPageSize = 9;//***
var allWidth = 100;
var allHeight = 100;
var data = {"totalCount":1,"rows":[{"b_vou_id":1,"toctrlid":2,"budget_adjust":3,"create_date":4},{"b_vou_id":2,"toctrlid":11,"budget_adjust":3,"create_date":4}]}
//**
reportGridStore = new Ext.data.JsonStore({
root:"rows", 
totalProperty:"totalCount", 
idProperty:"id", 
remoteSort:true, 
fields:[
{name:"b_vou_id"}, 
{name:"toctrlid"}, 
{name:"budget_adjust"}, 
{name:"create_date"}
], 
data:data
});
reportGridStore.setDefaultSort("create_date", "DESC");

var reportGridBar = new Ext.PagingToolbar({
//**
pageSize:1, 
//**
text: '刷新',
store:reportGridStore, 
displayInfo:true, 
displayMsg: '分页{0} - {1} of {2}'
});var reportGrid = new Ext.grid.GridPanel({
region:'center',
width:allWidth*0.48,
height:allHeight*0.51,
store: reportGridStore,
stripeRows: true,
autoscoll:true,
header: true,
disableSelection:true,
loadMask: true,
bbar: reportGridBar,
viewConfig:{forceFit:true},
columns:[
{header: "明细ID", width: 0.2*allWidth, sortable: true, dataIndex: 'b_vou_id'},
{header: "额度ID", width: 0.12*allWidth, sortable: true, dataIndex: 'toctrlid'},
{header: "调整类型", width: 0.12*allWidth, sortable: true, dataIndex: 'budget_adjust'},
{header: "创建时间", width: 0.12*allWidth, sortable: true, dataIndex: 'create_date'}
]
});var reportPanel = new Ext.Panel({
id : 'report',
layout : 'border',
title : '报表信息',
height : allHeight * 0.51,
bodyStyle : 'background-color:#dfe8f6',
items : [reportGrid]
});
//**
Ext.onReady(function(){
new Ext.Viewport({
layout:'fit',
items:[reportPanel]
})
});
//**

Answer 6

我试过了，那你改的这个直接用是可以的，可是放过我那个里边就不行了。
我想是不是因为我那边什么地方给屏蔽了，我那个文件里边的展示是这样的，麻烦帮我看看是不是有什么问题：var panel = new Ext.Panel( {
id : 'portal',
layout : 'border',
applyTo : 'portal',
width : allWidth*0.98　 ,
height : allHeight*1.05,
items:[
{
region:'west',
width: 240,
margins:'0 6 6 0',
items: [loginPanel,trainPanelNotice,supportPanel]
},{
region:'center',
//   width: 333,
margins:'0 0 0 0',
layout:'fit',
items: [downloadPanelNotice, reportPanel]
}, {
region:'east',
width: 240,
margins:'0 0 6 6',
items: [ynczemailPanel,mofemailPanel,faqPanelNotice]
}
]
});

Answer 7

查出来了，是引入的一个CSS里边设置了
.x-grid3-header{display:none;}
谢谢这位大哥！