如何在 EXTJS 4.1 中创建导航栏？
Posted
技术标签:
【中文标题】如何在 EXTJS 4.1 中创建导航栏？【英文标题】：How to create navigation bar in EXTJS 4.1.? 【发布时间】：2016-02-16 16:33:52 【问题描述】：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>
【问题讨论】：
【参考方案1】：我猜Ext.tab.Panel 是你要找的，你的两个网格作为它的项目。您可以使用headerPosition 以任何您喜欢的方式对齐标签面板标题或隐藏它并添加自定义工具栏。
作为替代解决方案，您可以使用按钮添加 Ext.toolbar.Toolbar 并自行添加逻辑。
Simple fiddle 说明如何做到这一点，以它为基础。
【讨论】：
@sergey_novikov 谢谢.....我检查了，在 extjs 4 选项卡面板中有一个名为选项卡位置的选项....当我将选项卡位置设置为“左”时，所有选项卡都是垂直的，即.对应的标签页头是从下往上读的，如何让标签页标题水平？ @Prateek 它不是开箱即用的，你必须覆盖Ext.tab.Bar - docs.sencha.com/extjs/4.2.1/source/Bar2.html#Ext-tab-Bar
@Sergey_Novikov 我已经编辑了我正在处理的代码.....现在问题是.....1.第一次单击任何按钮时，需要一些时间显示相应的网格....那么我怎样才能减少它或修改代码以使其看起来不错.....2。包含三个按钮的侧工具栏.....如何改善该侧工具栏的外观和感觉？
@Prateek 老实说 1. 我不知道为什么渲染要花很多时间，我可以为您提供在您的网格容器上添加带有 .setLoading(true) 的加载掩码（在 beforerender 左右）和setLoading(false) 当一切准备就绪时（在 afterrender 或存储 load 如果您使用远程数据源或根据您的应用程序逻辑的任何其他事件）。 2. 我不是设计师，我使用稍微修改过的 Neptune 主题，所以我只能提供给你看 ExtJS 主题主题 - docs.sencha.com/extjs/4.2.1/#!/guide/theming
@Prateek 1. 查看Ext.toolbar.Paging - docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging 2. 使用closable 属性和closeAction - docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-closable以上是关于如何在 EXTJS 4.1 中创建导航栏？的主要内容，如果未能解决你的问题，请参考以下文章