EXTJS 4.1 I have two locking grids in my panel. How to create a side navigation bar in EXTJS 4.1. with two options such that on clicking first option first locking grid is displayed and on clicking other option ,the second locking grid is created.
My current code is like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* @cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 225,
/**
* @cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* @cfg {Object} defaultAnimCfg
* <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
easing: 'bounceOut'
},
/**
* Creates new ProgressBarPager.
* @param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.onReady(function() {
Ext.QuickTips.init()
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am']];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 5,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData,
proxy: {
type: 'memory',
enablePaging: true,
data: myData
}
});
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 5,
}
});
// create the Grid
var grid1 = {
buffered: true,
loadMask: true,
style: 'border: solid Red 2px',
xtype:'grid',
store: store,
id:'grid1',
hidden:true,
columnLines: true,
columns: [{
text : 'Company',
locked : true,
flex:1,
width : 200,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : 'Price',
width : 125,
locked:true,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
},{
text : 'Change',
width : 555,
sortable : true,
dataIndex: 'change',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : '% Change',
width : 555,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange',
},{
text : 'Last Updated',
width : 555,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
},
height: 0.5*Ext.getBody().getViewSize().height,
width:0.5*Ext.getBody().getViewSize().width,
title: '<center>Genus</center>',
viewConfig: {
stripeRows: true
}
};
var grid2 = {
xtype:'grid',
store: store,
id:'grid2',
hidden:true,
style: 'border: solid Red 2px',
columnLines: true,
columns: [{
text : 'Company',
locked : true,
flex:1,
width : 200,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : 'Price',
width : 125,
locked:true,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
},{
text : 'Change',
width : 555,
sortable : true,
dataIndex: 'change',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : '% Change',
width : 555,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange',
},{
text : 'Last Updated',
width : 555,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
},
height: 0.5*Ext.getBody().getViewSize().height,
width:0.5*Ext.getBody().getViewSize().width,
title: '<center>Family</center>',
viewConfig: {
stripeRows: true
}
};
var grid3 = {
xtype:'grid',
store: store,
id:'grid3',
style: 'border: solid Red 2px',
columnLines: true,
columns: [{
text : 'Company',
locked : true,
flex:1,
width : 200,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : 'Price',
width : 125,
locked:true,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
},{
text : 'Change',
width : 555,
sortable : true,
dataIndex: 'change',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : '% Change',
width : 555,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange',
},{
text : 'Last Updated',
width : 555,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
height: 0.5*Ext.getBody().getViewSize().height,
width:0.5*Ext.getBody().getViewSize().width,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
},
title: '<center>Phylum</center>',
viewConfig: {
stripeRows: true
}
};
var panel1= {
xtype:'panel',
layout:'vbox',
width:0.15*Ext.getBody().getViewSize().width,
height: 0.96*Ext.getBody().getViewSize().height,
title:'panel1',
items:[{
xtype:'button',
text:'Genus',
id:'button1',
height:0.05*Ext.getBody().getViewSize().height,
width:0.14*Ext.getBody().getViewSize().width,
handler:function(button)
{
/*Ext.getCmp('grid2').show();*/
button.up('#main').down('#grid2').hide();
button.up('#main').down('#grid3').hide();
button.up('#main').down('#grid1').show();
}
},
{
xtype:'button',
text:'Family',
height:0.05*Ext.getBody().getViewSize().height,
width:0.14*Ext.getBody().getViewSize().width,
handler:function(button)
{
/*Ext.getCmp('grid2').show();*/
button.up('#main').down('#grid1').hide();
button.up('#main').down('#grid3').hide();
button.up('#main').down('#grid2').show();
}
},
{
xtype:'button',
text:'Phylum',
height:0.05*Ext.getBody().getViewSize().height,
width:0.14*Ext.getBody().getViewSize().width,
handler:function(button)
{
/*Ext.getCmp('grid2').show();*/
button.up('#main').down('#grid1').hide();
button.up('#main').down('#grid2').hide();
button.up('#main').down('#grid3').show();
}
}
]
};
var panel2= {
id:'panel2',
xtype:'panel',
bodyStyle: 'padding: 120px;',
width:0.84*Ext.getBody().getViewSize().width,
height: 0.96*Ext.getBody().getViewSize().height,
/*title:'panel2',*/
layout:'vbox',
closable:true,
closeAction:'hide',
items:[grid1,grid2,grid3]
};
var resultsPanel = Ext.create('Ext.panel.Panel', {
id:'main',
title: 'Results',
layout:'hbox',
width:Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
renderTo: Ext.getBody(),
items: [panel1,panel2]
});
});
</script>
</head>
<body>
</body>
</html>
I guess Ext.tab.Panel is what you looking for, with your two grids as its items. You can align tab panel header any way you like with headerPosition or hide it and add custom toolbar.
As alternative solution you can add Ext.toolbar.Toolbar with buttons and add logic on your own.
Simple fiddle to illustrate how you can do it, use it as base.