如何在EXTJS 4.1中创建导航栏。？
ExtJS4.1 我的面板上有两个锁定网格。 如何在EXTJS 4.1中创建侧导航栏。具有两个选项，即单击第一个选项时显示第一个锁定网格，单击其他选项时创建第二个锁定网格 我当前的代码如下：如何在EXTJS 4.1中创建导航栏。？,extjs,extjs4,extjs4.1,extjs4.2,Extjs,Extjs4,Extjs4.1,Extjs4.2,ExtJS4.1 我的面板上有两个锁定网格。 如何在EXTJS 4.1中创建侧导航栏。具有两个选项，即单击第一个选项时显示第一个锁定网格，单击其他选项时创建第二个锁定网格 我当前的代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title id='title'>
<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>
HTML页面设置教程
Ext.define（'Ext.ux.ProgressBarPager'{
需要：['Ext.ProgressBar']，
/**
*@cfg{Number}宽度
*默认进度条宽度。默认值为225
*/
宽度：225，
/**
*@cfg{String}defaultText
*存储加载时显示的文本。默认值为“加载…”
*/
defaultText:“正在加载…”，
/**
*@cfg{Object}defaultAnimCfg
*A{@link Ext.fx.Anim Ext.fx.Anim}配置对象
*/
defaultAnimCfg：{
持续时间：1000，
放松：“反弹”
},
/**
*创建新的ProgressBarPager。
*@param{Object}config配置选项
*/
构造函数：函数（配置）{
如果（配置）{
Ext.apply（这个，配置）；
}
},
//公开的
初始化：函数（父级）{
var显示项；
if（parent.displayInfo）{
this.parent=parent；
displayItem=parent.child（“#displayItem”）；
如果（显示项）{
删除（displayItem，true）；
}
this.progressBar=Ext.create（'Ext.progressBar'{
text:this.defaultText，
宽度：这个。宽度，
动画：this.defaultAnimCfg，
风格：{
光标：“指针”
},
听众：{
el:{
范围:本,，
单击：this.handleProgressBar单击
}
}
});
parent.displayItem=this.progressBar；
parent.add（parent.displayItem）；
Ext.apply（parent，this.parentOverrides）；
}
},
//私人的
//此方法处理单击进度条的操作
handleProgressBarClick:函数（e）{
var parent=this.parent，
displayItem=parent.displayItem，
box=this.progressBar.getBox（），
xy=e.getXY（），
位置=xy[0]-box.x，
pages=Math.ceil（parent.store.getTotalCount（）/parent.pageSize），
newPage=Math.max（Math.ceil（位置/（displayItem.width/pages）），1）；
parent.store.loadPage（newPage）；
},
//私有，覆盖
父项覆盖：{
//私人的
//此方法通过进度条更新信息。
updateInfo:function（）{
if（此.displayItem）{
var count=this.store.getCount（），
pageData=this.getPageData（），
消息=计数==0？
本文件编号：emptyMsg：
Ext.String.format(
这个.displaymg，
pageData.fromRecord，pageData.toRecord，this.store.getTotalCount（）
),
百分比=pageData.pageCount>0？（pageData.currentPage/pageData.pageCount）：0；
this.displayItem.updateProgress（百分比、消息、this.animate | | this.defaultAnimConfig）；
}
}
}
});
Ext.onReady（函数（）{
Ext.QuickTips.init（）
//存储区的静态数据示例
var myData=[
[3MCO'，71.72,0.02,0.03，'9/1120: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']；
/**
*用于列渲染器的自定义函数
*@param{Object}val
*/
功能更改（val）{
如果（val>0）{
返回“+val+”；
}else if（val<0）{
返回“+val+”；
}
返回val；
}
/**
*用于列渲染器的自定义函数
*@param{Object}val
*/
函数pctChange（val）{
如果（val>0）{
返回'+val+'%'；
}else if（val<0）{
返回'+val+'%'；
}
返回val；
}
//创建数据存储
var store=Ext.create（'Ext.data.ArrayStore'{
自动加载：false，
页面大小：5，
字段：[
{名称：'公司'}，
{name:'price'，键入：'float'}，
{name:'change'，type:'float'}，
{name:'pctChange'，键入：'float'}，
{name:'lastChange'，type:'date'，dateFormat:'n/j h:ia'}
],
数据：myData，
代理：{
键入：“内存”，
enablePaging:true，
数据：myData
}
});
存储容量({
参数：{
//如果使用分页，请为第一页加载指定参数
起点：0，
限额：5，
}
});
//创建网格
变量grid1={
缓冲区：对，
loadMask：是的，
样式：“边框：纯红2px”，
xtype:“网格”，
店:店,，
id:'grid1'，
隐藏：是的，
专栏：没错，
栏目：[{
文本：“公司”，
是的，
弹性：1，
宽度：200，
可排序：false，
数据索引：“公司”，
渲染器：函数（值、元数据、记录、行、列、存储、gridView）{
metaData.tdAttr='data qtip=“”+value+”；
返回值；
}
},{
文字：“价格”，
宽度：125，
是的，
可排序：是的，
"美国货币",，
数据索引：“价格”，
},{
文本：“Ch