I have the code below:
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
var xg = Ext.grid;
Ext.menu.RangeMenu.prototype.icons = {
gt: '../../images/icons/greater_then.png',
lt: '../../images/icons/less_then.png',
eq: '../../images/icons/equals.png'
};
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name:'data', type:'date', dateFormat:'n/j h:i'},
{name:'proces'},
{name:'arqEnt'},
{name:'fluxo'},
{name:'origem'},
{name:'status'}
]);
////////////////////////////////////////////////////////////////////////////////////////
// Grid
////////////////////////////////////////////////////////////////////////////////////////
var store = new Ext.data.Store({
reader: reader,
data: xg.dummyData
});
var filters = new xg.GridFilters({
filters:[
{type:'date', dataIndex:'data'},
{type:'numeric', dataIndex:'proces'},
{type:'string', dataIndex:'arqEnt'},
{type:'numeric', dataIndex:'fluxo'},
{type:'list', dataIndex:'origem', options: ['Arbor', 'BLL', 'Sistema 03', 'Sistema 04'], phpMode:true},
{type:'list', dataIndex:'status', options: ['Enviado', 'Gerado', 'Opção 03', 'Opção 04'], phpMode:true}
]});
var sm2 = new xg.CheckboxSelectionModel({singleSelect:true})
var gridErros = new xg.GridPanel({
id:'button-grid',
region:'center',
selModel: new xg.RowSelectionModel({singleSelect:true}),
plugins: filters,
store: store,
cm: new xg.ColumnModel([
{id:'data', header:"Data", width:100, sortable:true, dataIndex:'data', renderer:Ext.util.Format.dateRenderer('d/m/Y - h:i')},
{id:'proces', header:"Proces.", width:100, sortable:true, dataIndex:'proces'},
{id:'arqEnt', header:"Arquivo Entrada", width:200, sortable:true, dataIndex:'arqEnt'},
{id:'fluxo', header:"Fluxo", width:100, sortable:true, dataIndex:'fluxo'},
{id:'origem', header:"Origem", width:100, sortable:true, dataIndex:'origem'},
{id:'status', header:"Status", width:100, sortable:true, dataIndex:'status'}
]),
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
store:store,
pageSize:15,
plugins:filters,
displayInfo:true,
displayMsg:'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
//inline buttons
buttonAlign:'left',
frame:true,
title:'Relatório de erros por fluxo',
iconCls:'icon-grid',
start:0,
limit:15
});
// Panel for the south
/*var nav = new Ext.Panel({
title:'',
region:'south',
split:true,
frame:true,
height:220,
collapsible:true,
html:'<div style="width: 100%; height: 100%; background-color: white; overflow: auto"><TABLE><TR><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #1:</b></TD><TD><b>4 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #2:</b></TD><TD><b>2 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #3:</b></TD><TD><b>1 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD></TR><TR style="height:20px;"><TD></TD></TR><TR><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #4:</b></TD><TD><b>4 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #5:</b></TD><TD><b>2 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD><TD style="width:20px;"></TD><TD><TABLE style="font-size: 11px;"><TR><TD><b>Total de arquivos Fluxo #6:</b></TD><TD><b>1 (100%)</b></TD></TR><TR style="height:8px;"><TD colspan="2"></TD></TR><TR><TD>Total de arquivos gerados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos liberados:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos enviados:</TD><TD>1 (25%)</TD></TR><TR><TD>Total de arquivos entregue:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos sem erro:</TD><TD>0 (0%)</TD></TR><TR><TD>Total de arquivos com erro:</TD><TD>0 (0%)</TD></TR></TABLE></TD></TR></TABLE></div>'
}); */
var gridTot = new xg.GridPanel({
iconCls:'icon-grid',
region:'south',
split:true,
width:773, // Uma colua com 20, 5 com 100 e a restante com 200.
height:150,
frame:true,
store:new Ext.data.GroupingStore({
reader:new Ext.data.ArrayReader({}, [
{name:'total'},
{name:'fluxo'},
{name:'gerados'},
{name:'liberados'},
{name:'enviados'},
{name:'entregues'},
{name:'comErro'},
{name:'semErro'}
]),
data:xg.dummyData02,
sortInfo:{field:'gerados', direction: "ASC"},
groupField:'fluxo'
}),
columns: [
{id:'total', hidden:true, header:"Total de arquivos no fluxo 1", width:60, sortable:true, dataIndex:'total'},
{id:'fluxo', hidden:true, header:"Fluxo", width:60, sortable:true, dataIndex:'fluxo'},
{id:'gerados', header:"Arquivos gerados", width:60, sortable:true, dataIndex:'gerados'},
{id:'liberados', header:"Arquivos liberados", width:60, sortable:true, dataIndex:'liberados'},
{id:'enviados', header:"Arquivos enviados", width:60, sortable:true, dataIndex:'enviados'},
{id:'entregues', header:"Arquivos entregues", width:60, sortable:true, dataIndex:'entregues'},
{id:'comErro', header:"Arquivos com erro", width:60, sortable:true, dataIndex:'comErro'},
{id:'semErro', header:"Arquivos sem erro", width:60, sortable:true, dataIndex:'semErro'}
],
view: new xg.GroupingView({
forceFit:true
//groupTextTpl:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
viewConfig:{
forceFit:true
}
});
var win = new Ext.Panel({
width:773,
height:539,
layout:'border',
items:[gridTot, gridErros],
renderTo:document.body
});
});
// Array data for the grids
Ext.grid.dummyData = [
['10/02 21:25','01','abcd_09022009.txt','01','Arbor','Gerado'],
['10/02 21:25','03','wxyz_08022009.txt','03','BLL','Gerado'],
['10/02 21:25','02','xxxxxxxxxxxxxxxxx','02','xxxxxxx','Gerado'],
['10/02 21:25','04','xxxxxxxxxxxxxxxxx','04','xxxxxxx','Gerado'],
['10/02 21:25','05','xxxxxxxxxxxxxxxxx','05','xxxxxxx','Gerado'],
['10/02 21:25','06','xxxxxxxxxxxxxxxxx','06','xxxxxxx','Gerado'],
['10/02 21:25','07','xxxxxxxxxxxxxxxxx','07','xxxxxxx','Gerado'],
['10/02 21:25','08','xxxxxxxxxxxxxxxxx','08','xxxxxxx','Gerado'],
['10/02 21:25','09','xxxxxxxxxxxxxxxxx','09','xxxxxxx','Gerado']
];
Ext.grid.dummyData02 = [
['6','1','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)'],
['6','2','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)'],
['6','3','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)'],
['6','4','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)'],
['5','5','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)'],
['6','6','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)','1 (16,6%)']
];
// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++) {
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}
// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData02.length; i++) {
Ext.grid.dummyData02[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}
When I resize the panels bbar won't move unless mouseOver one of its components, such as the reload button.
See pics attached.
Apparently, this code works using library version 2.2.1 using IE 6 and 7, but don't work using library 2.2 using IE6 and 7. This code won't work in IE8 no matter which library is being used.