extjs 嵌套表格的垂直滚动条动态设置问题

Question

extjs 嵌套表格的垂直滚动条只能反映第一级的数据量，怎样随着第二级表格的展开调整垂直滚动条？谢谢了
图一不需滚动条，图2需要怎么能调出滚动条；或者图一本来有滚动条，图2展开后需要重设滚动条，怎么设置？附图和源码
图1：图2：
源码：
Morik.Office.JfgstjglPanel= function(config) {
Morik.Office.JfgstjglPanel.superclass.constructor.call(this, config);
var thisServlet="gzxx.myaction";
var pagesize=6;
var stuwinTitle='故障信息管理';
var masGrid;
var mySbpartid;
var rqs;
var rqe;
   setT = new Ext.form.FieldSet({
        height:60,
        layout: 'column',
        border:false,
        anchor:'100%',
        labelWidth: 60,
        items:[{
            columnWidth:0.27,
            layout: 'form',
            border:false,
            items: [{
            xtype: 'lovcombo',
fieldLabel: '单位',
            name: 'sbpartidt',
     store: new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'yh.myaction?method=cmbSbdw'}),
        reader: new Ext.data.ArrayReader({},[
            {name:'value'},
            {name:'text'}
        ])
    }),
           mode: 'remote',
triggerAction: 'all',
            valueField: 'value',
            displayField: 'text',
 editable : true,
hiddenName:'sbpartid',
listeners:{
             collapse:function(combo ){//下拉框收起时根据班次、单位、日期确定本日志是否已填写过。是：调出追加；否：插入本日志
  getLogid();
             }
},
anchor: '95%'
            }]
        },{
            columnWidth:.22,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '开始日期',
                name: 'rqs',//开始日期rqstart
                value:new Date(),
                 listeners:{
             select : function(date)
             {
getLogid();
             }
                 },
                anchor:'95%'
            }]
        },{
            columnWidth:.22,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '终止日期',
                name: 'rqe',//rqend
                value:new Date(),
                 listeners:{
             select : function(date)
             {
getLogid();
             }
                 },
                anchor:'95%'
            }]
        },{
            columnWidth:.22,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '截止日期',
                name: 'jzrq',//rqend
                disabled:true,
                value:new Date().add(Date.DAY,-1),
                 listeners:{
             select : function(date)
             {
//getLogid();
             }
                 },
                anchor:'95%'
            }]
        },{
            columnWidth:.07,
            layout: 'form',
            border:false,
            items: [{
                xtype:'button',
                text:'保存',
                id:"saveJzrq",
                disabled:true,
                handler: function(){
    var jzrq=Ext.util.Format.date(setTform.getForm().findField('jzrq').getValue(),"Y-m-d");
    var sbpartid=setTform.getForm().findField('sbpartid').getValue();
    var myflag=false;
    if(sbpartid=="" ) {return;}
Ext.Ajax.request({
url:Srvt + '?method=select',
params:{sbpartid:sbpartid,jzrq:jzrq},
success: function(response, options) {  
   var responseArray = Ext.util.JSON.decode(response.responseText); 
   if(responseArray.success == true){ //设置grid可以使用 
   if(responseArray.totalSize==1){
Ext.MessageBox
.confirm(
'确认',
responseArray.message,
function(btn) {
if (btn == 'yes') {//填写新日志。设置grid可以使用
Ext.Ajax.request({
url:Srvt + '?method=updateJzrq',
params:{jzrq:jzrq},
success: function(response, options) {  
   var responseArray = Ext.util.JSON.decode(response.responseText); 
   if(responseArray.success == true){ //设置grid可以使用 
   }else{//填写新日志失败。设置grid不可以使用                 
   Ext.Msg.alert('信息', "update error！");
   }  
},
    failure:function()
     {
        Ext.Msg.alert( "更新失败！");
     }
});
}else{//不填写新日志。设置grid不可以使用
}
});
}//%$%$%$%$%$%$
   if(responseArray.totalSize==0){
Ext.Ajax.request({
url:Srvt + '?method=updateJzrq',
params:{jzrq:jzrq},
success: function(response, options) {  
   var responseArray = Ext.util.JSON.decode(response.responseText); 
   if(responseArray.success == true){ //设置grid可以使用 
       }else{//填写新日志失败。设置grid不可以使用                 
   Ext.Msg.alert('信息', "update error！");
   }  
},
    failure:function()
     {
        Ext.Msg.alert( "更新失败！");
     }
});    }

   }else{//填写新日志失败。设置grid不可以使用                 
   Ext.Msg.alert('信息', "update error！");
   }  
},
    failure:function()
     {
        Ext.Msg.alert( "更新失败！");
     }
});},
                scope: this
            }]
        }]
    });
    setTform = new Ext.form.FormPanel({
        height: 60,
        border: false,
        labelWidth:50,
        labelAlign:'right',
        frame:true,
        items:[setT]
    });
function setmyEnable(){
masGrid.setDisabled(false);
}
function setmyDisable(){
masGrid.setDisabled(true);
}
function getLogid(){//setTform的附属函数。根据班次、单位、日期确定本日志是否已填写过。是：调出追加；否：插入本日志
rqs=Ext.util.Format.date(setTform.getForm().findField('rqs').getValue(),"Y-m-d");
rqe=Ext.util.Format.date(setTform.getForm().findField('rqe').getValue(),"Y-m-d");
mySbpartid=setTform.getForm().findField('sbpartid').getValue();
    if(mySbpartid=="") {return;}

setmyEnable();
masGrid.store.load({params:{start:0,limit:pagesize,sbpartid:mySbpartid,rqs:rqs,rqe:rqe}});
}
var dsBm=new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url:'yh.myaction?method=cmbSbdw'}),
    reader: new Ext.data.ArrayReader({},[
        {name:'value'},
        {name:'text'}
    ])
});
dsBm.load();var expander = new Ext.grid.RowExpander({
        tpl : new Ext.XTemplate('<div class="detailData">', '', '</div>')
        });
expander.on("expand",function(expander,r,body,rowIndex){
  //查找 grid
  window.testEle=body;
  if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
      Ext.DomQuery.select("div.detailData")[0];
var gridChild = function() {
var _gridChild = this;
var recordTypeChild = Ext.data.Record.create([ {/**$$$$$ */
name : 'rq',
type : 'string',
mapping : 'rq'
},{name : 'xh',
type : 'string',
mapping : 'xh'
}, {
name : 'time',
type : 'string',
mapping : 'time'
}, {
name : 'score',
type : 'string',
mapping : 'score'
}, {
name : 'bj',
type : 'string',
mapping : 'bj'
}]);
 
var ryname=r.data.name;
this.store = new Ext.data.GroupingStore( {
proxy : new Ext.data.HttpProxy( {
url :thisServlet+'?method=listChiTj'
}),
reader : new Ext.data.JsonReader( {
root : 'list',
totalProperty : 'totalSize'
//,id : 'rq'
}, recordTypeChild)
,groupField:'bj', //定义默认分组列
sortInfo:{field:'xh',direction:'ASC'} //定义排序列，此属性必须定义
});
this.store.load({params:{name:ryname,rqs:rqs,rqe:rqe}});
 this.view=new Ext.grid.GroupingView(); //添加分组视图
//masGrid.store.load({params:{start:0,limit:pagesize,sbpartid:mySbpartid,rqs:rqs,rqe:rqe}});
function jfmx(v) {//绩分明细
if(v==1)
return "维护项";
else if(v==2)
return "值班项";
     //if(v==dsBm.getAt(i).get('value'))  return '<span style="color:green;">' +dsBm.getAt(i).get('text')+'</span>';
     } this.cm = new Ext.grid.ColumnModel([
//      {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
          {header:"日期",dataIndex: 'rq',width: 70,hideable:false,sortable:false,resizable:true}
         ,{header: "序号",dataIndex: 'xh',width: 40,hideable:false,sortable:false,resizable:true}
,{header: "时间",dataIndex: 'time',width: 40,hideable:false,sortable:false,resizable:true}
,{header: "绩分",dataIndex: 'score',width: 40,hideable:false,sortable:false,resizable:true}
,{header: "    ",dataIndex: 'bj',width: 50,hideable:false,sortable:false,renderer: jfmx,resizable:true}
//,smExpander
      ]); gridChild.superclass.constructor
.call(
this,
{
layout : 'fit',
//sm : smExpander,
        loadMask:true,      //读取数据时的遮罩和提示功能，默认为false  
viewConfig : {
  emptyText : "sorry，child没有数据",
forceFit : true,
            enableRowBody : true
         }
});  
}
  
 

Ext.extend(gridChild, Ext.grid.GridPanel, {
autoWidth :true,
autoHeight : true,
renderTo:Ext.DomQuery.select("div.detailData",body)[0]
});
var gridChildZ= new gridChild();
gridChildZ.on( {
'mousedown' : function(e) {
e.stopPropagation();
},
'mouseover' : function(e) {
e.stopPropagation();
},
'mouseout' : function(e) {
e.stopPropagation();
}
});  }
});

Answer 1

源码继续：var StudentGridPanel = function() {
var _grid = this;
masGrid=this;
var recordType = Ext.data.Record.create([ {
name : 'name',
type : 'string',
mapping : 'name'
}, {
name : 'time',
type : 'int',
mapping : 'time'
}, {
name : 'score',
type : 'int',
mapping : 'score'
}, {
name : 'sbpartid',
type : 'int',
mapping : 'sbpartid'
}]);
this.store = new Ext.data.GroupingStore( {
proxy : new Ext.data.HttpProxy( {
url : thisServlet + '?method=listJfgstj'
}), // set up the JsonReader
reader : new Ext.data.JsonReader( {
root : 'list',
totalProperty : 'totalSize',
id : 'name'
}, recordType)
,groupField:'sbpartid', //定义默认分组列
sortInfo:{field:'name',direction:'ASC'} //定义排序列，此属性必须定义
});
    this.view=new Ext.grid.GroupingView(); //添加分组视图
var sm = new Ext.grid.CheckboxSelectionModel( {
singleSelect : false
});
function sbpart(v) {
     for(i=0,Count=dsBm.getCount();i<Count;i++)
     if(v==dsBm.getAt(i).get('value'))  return dsBm.getAt(i).get('text');
     //if(v==dsBm.getAt(i).get('value'))  return '<span style="color:green;">' +dsBm.getAt(i).get('text')+'</span>';
    } this.columns = [
expander,
new Ext.grid.RowNumberer(), {
header : "姓名",
width : 75,
sortable : true,
dataIndex : 'name'
}, {
header : "时间",
width : 50,
sortable : true,
dataIndex : 'time'
}, {
header : "绩分",
width : 50,
sortable : true,
dataIndex : 'score'
}, {
header : "部门",
width : 75,
sortable : true,
renderer: sbpart,
dataIndex : 'sbpartid'
}//, sm
]; StudentGridPanel.superclass.constructor
.call(
this,
{
layout : 'fit',
//sm : sm,
        loadMask:true,      //读取数据时的遮罩和提示功能，默认为false  
viewConfig : {
  emptyText : "sorry，没有数据",
            forceFit : true,
            enableRowBody : true,
            getRowClass :function(record, rowIndex, p, ds) {
                var cls = 'white-row';
var colorI=rowIndex%3;
                switch (colorI) {
                    case 0 :
                        cls = 'yellow-row'
                        break;
                    case 1 :
                        cls = 'green-row'
                        break;
                    case 2 :
                        cls = 'red-row'
                        break;
                }
                return cls;
            }
        }/*,
bbar : new Ext.PagingToolbar( {
pageSize : pagesize,
store : this.store,
            beforePageText:"第",  
            afterPageText:"页，共{0}页",  
            lastText:"尾页",  
            nextText :"下一页",  
            prevText :"上一页",  
            firstText :"首页",  
            refreshText:"刷新页面",  
            displayInfo: true,  
            displayMsg:"当前显示 {0} - {1}条, 共 {2}条",                       
            emptyMsg: "没有记录"          
})*/
});
}Ext.extend(StudentGridPanel, Ext.grid.GridPanel, {
// width : 660,
height : 900,
         stripeRows : true, //True表示使用不同颜色间隔行，默认为false.   
//         loadMask:true,      //读取数据时的遮罩和提示功能，默认为false   getSelected : function() {
var record = this.getSelectionModel().getSelected();
if (record == null) {
Ext.MessageBox.show( {
title : '提示',
msg : "请选择记录",
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
} else {
return record;
}
},
    listeners:{},
    plugins:[expander], 'mouseover' : function(e) {
e.stopPropagation();
},
'mouseout' : function(e) {
e.stopPropagation();
}, getSelections : function() {
var records = this.getSelectionModel().getSelections();
if (records.length < 1) {
Ext.MessageBox.show( {
title : '提示',
msg : "请选择记录",
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
} else {
return records
}
}
});
this.add( setTform);
this.add(new StudentGridPanel());}
Ext.extend(Morik.Office.JfgstjglPanel, Ext.Panel, {});/**$$$$$ */

Answer 2

图1
http://hi.baidu.com/mossrose_me/album/item/6e07c93852205ea51b4cff51.html
图2：
http://hi.baidu.com/mossrose_me/album/item/8eb37617196f14d686d6b65b.html
图片为何发不上来？

Answer 3

还在学习EXTJS中，感觉比较复杂啊，要嵌套很多层~~悲剧死了，代码写出来，过一段时间后，自己要看很久才能看懂哦！

Answer 4

设置grid的高度和autoScroll:true,试试看

Answer 5

怎样随着第二级表格的展开调整垂直滚动条？
extjs官方源码中也没有这种需求的例子，要自己滚动的。

Answer 6

楼主 我测试了下 你做的不错 只要把主grid的高度设置的小一点就行 比如900改为200，我试了可以