/**
* Created by jackchen on 2017/8/15.
*/
Ext.define('admin.view.view.detail.ViewDetailLinkageList', {
extend: 'Ext.window.Window',
alias: 'widget.viewDetailLinkageList',
layout: 'anchor',
modal: true,
title: '关联明细',
width: 700,
height: 350,
initComponent: function() {
var me = this;
console.info(me);
Ext.applyIf(me, {
items: [{
xtype: 'baseList',
autoScroll: true,
forceFit:true,
enableBasePaging:false,
store:Ext.create('admin.store.ViewDetailLinkageStore'),
tbar:[
{xtype:'button',text:'添加',itemId:'addButton',iconCls:'table_add'},
{xtype:'button',text:'删除',itemId:'deleteButton',iconCls:'table_remove',autodisabled:true,disabled:true}
],
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text:'字段标题',
dataIndex:'fieldNameText'
},{
text:'字段名',
dataIndex:'fieldName'
},{
text:'关联字段',
dataIndex:'linkageFieldNameText'
},{
text:'关联字段名',
dataIndex:'linkageFieldName'
}
],
listeners:{
scope:me,
afterrender:function(o, eOpts ){
var me = this;
var linkageConditionTextarea = me.linkageConditionTextarea.getValue();
if(linkageConditionTextarea){
var gridStore = me.down('grid').getStore();
var objArr = Ext.JSON.decode(linkageConditionTextarea);
Ext.Array.each(objArr,function(obj){
gridStore.add(obj);
})
}
}
}
}],
buttons: [{
text:'保存',itemId:'generateJSONCondition',iconCls:'table_save'
}]
});
me.callParent(arguments);
}
});
在显示中没有出现滚动条,于是在寻找解决的方法中提出两种假设的方式:
1.可能是因为设置窗口的高度设置大或小了,于是改变之后并不起作用。
2.可能是由于layout:'anchor'这个布局有问题,于是换了一个布局layout:'fit',之后发现滚动条,
验证正确。
对这两个布局进行了分析:
布局是fit:
当容器只包含一个子元素时,要使子元素自动填满容器。用fit布局
简单的说就是一个面板填充一个容器用fit.
布局是anchor:子元素的位置与父容器进行关联固定,如果容器大小改变,
所有固定的子项将按照规则自动的重新固定。
简单的说就是子元素根据父容器的比例放大与缩小。
也就是说滚动条会变长变短,但是父容器不会变,不符合布局是anchor。