170329

上下左右的间隔： margin: '0 10 0 0',

设置Penal的背景颜色为绿色：

bodyStyle: {
backgroundColor: 'green',
backgroundImage: 'none'
 },

大Penal中的一个item对应一个按钮框：

{
// title: "待审批公文",
// id: 'waitHandleBriefcase',
// xtype: "panel",
// layout: "fit",
// name: 'ApprovalGrid',
// width: '90%',
// iconCls: 'Bookedit',
// items: me.createApprovalGrid(),
// },

 

 

 

上半页的框框：

me.items = [
{
xtype: 'container',

margin: '5 0 0 0',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch',
},
//items: [{
// xtype: 'tabPanelBase',
// bodyStyle: {
// backgroundColor: 'green',
// backgroundImage: 'none'
// },
// flex: 1,
// margin: '0 10 0 0',
// layout: 'fit',
//heiht: 0,
//titleAlign: 'right',
//items: [
//{
// title: '公司文',
// id: 'companyDocument',
// xtype: "panel",
// layout: "fit",
// iconCls: 'Applicationviewgallery',
// width: '90%',
// //items: me.createGridCompany(),
// listeners: {
// activate: me.createGridCompany
// }
//},

另一个框框：

 

//{
// xtype: 'tabPanelBase',
// flex: 1,
// layout: "fit",
// margin: '0 10 0 0',
// titleAlign: 'right',
// autoScroll: false,
// items: [
// {
// title: "待审批公文",
// id: 'waitHandleBriefcase',
// xtype: "panel",
// layout: "fit",
// name: 'ApprovalGrid',
// width: '90%',
// iconCls: 'Bookedit',
// items: me.createApprovalGrid(),
// },

 基本的架构：

me.items = [
{
xtype: 'container',

margin: '5 0 0 0',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch',
},

item[]...

 },

item[]...

{

 

 

 

最终的Penal框架：

me.items = [
{
xtype: 'container',

margin: '5 0 0 0',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch',
},
items: [{
xtype: 'tabPanelBase',
bodyStyle: {
backgroundColor: 'green',
backgroundImage: 'none'
},
flex: 1,
margin: '0 10 0 0',
layout: 'fit',
heiht: 0,
titleAlign: 'right',
items: [

 

]
},

最终代码：

Ext.define('app.view.home.IndexPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.IndexPanel',

layout: {
type: 'vbox',

align: 'stretch',
},
scrollable: true,
bodyPadding: 5,
heiht: 50,
bodyStyle: {
backgroundColor: 'red',
backgroundImage: 'none'
},
bodyCls: 'app-dashboard',
defaults: {
border: true,
},
initComponent: function () {
var me = this;
me.on("afterrender", function () {

Ext.Ajax.request({
url: '/WorkFlowOperate/LoadWaitWorkFlowStepData', //动态页地址
success: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
var C = recData.totalCount;
var waitFlowHometab = me.down("[name=waitFlowHomeGrid]");
//var waitFlowHomeTitle = C == 0 ? "待办流程" : "待办流程<span class='badge'>" + C + "</span>";
var waitFlowHomeTitle = "待办流程";
waitFlowHometab.setTitle(waitFlowHomeTitle);
},
failure: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
//var msg = recData.msg; ExtMsg.showToast(msg);
}

});
///待审任务
Ext.Ajax.request({
url: '/WorkFlowOperate/LoadWaitWorkFlowTaskStepData', //动态页地址
success: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
var C = recData.totalCount;
var waitTasketab = me.down("[name=waitTaskGrid]");
//var waitTaskTitle = C == 0 ? "待审任务" : "待审任务<span class='badge'>" + C + "</span>";
var waitTaskTitle = "待审任务";
waitTasketab.setTitle(waitTaskTitle);
},
failure: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
//var msg = recData.msg; ExtMsg.showToast(msg);
}

});
//我执行的任务
Ext.Ajax.request({
url: '/TaskExecution/LoadMainTotalCount/1', //动态页地址
success: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
var C = recData.totalCount;
var MyTaskInfotab = me.down("[name=MyTaskInfoGrid]");
//var MyTaskInfoTitle = C == 0 ? "我执行的任务" : "我执行的任务<span class='badge'>" + C + "</span>";
var MyTaskInfoTitle = "我执行的任务"
MyTaskInfotab.setTitle(MyTaskInfoTitle);
},
failure: function (resp, opts) {
var recData = Ext.JSON.decode(resp.responseText);
//var msg = recData.msg; ExtMsg.showToast(msg);
}

});

});
me.items = [
{
xtype: 'container',

margin: '5 0 0 0',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch',
},
items: [{
xtype: 'tabPanelBase',
bodyStyle: {
backgroundColor: 'green',
backgroundImage: 'none'
},
flex: 1,
margin: '0 10 0 0',
layout: 'fit',
heiht: 0,
titleAlign: 'right',
items: [

 

 

..............................

]
},

{
xtype: 'tabPanelBase',
flex: 1,
layout: "fit",
bodyStyle: {
backgroundColor: 'yellow',
backgroundImage: 'none'
},
margin: '0 10 0 0',
titleAlign: 'right',
autoScroll: false,
items: [

...........................

]

}
]
},