如何在 EXTJS 4.1. 中创建导航栏？
How to create navigation bar in EXTJS 4.1.?
EXTJS 4.1
我的面板中有两个锁定网格。
如何在 EXTJS 4.1 中创建侧边导航栏。 有两个选项，点击第一个选项会显示第一个锁定网格，单击其他选项会创建第二个锁定网格。
我现在的代码是这样的：
<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>
我想 Ext.tab.Panel 就是您要找的东西，您的两个网格是它的项目。您可以使用 headerPosition 以任何您喜欢的方式对齐选项卡面板 header 或隐藏它并添加自定义工具栏。
作为替代解决方案，您可以添加 Ext.toolbar.Toolbar 按钮并自行添加逻辑。
Simple fiddle为了说明如何做到这一点，将其用作基础。
EXTJS 4.1 我的面板中有两个锁定网格。 如何在 EXTJS 4.1 中创建侧边导航栏。 有两个选项，点击第一个选项会显示第一个锁定网格，单击其他选项会创建第二个锁定网格。
我现在的代码是这样的：
<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>
我想 Ext.tab.Panel 就是您要找的东西，您的两个网格是它的项目。您可以使用 headerPosition 以任何您喜欢的方式对齐选项卡面板 header 或隐藏它并添加自定义工具栏。
作为替代解决方案，您可以添加 Ext.toolbar.Toolbar 按钮并自行添加逻辑。
Simple fiddle为了说明如何做到这一点，将其用作基础。