漂亮的分页工具栏
PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ).
问题：如何将自己的按钮添加到带有分页信息（结果计数）的底部工具栏。
While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aesthetic purposes. In addition I also wanted to include a result count so that the user would know which set of the results they were looking at out of the total.
在创建cfgrid时，我遇到了一个问题，我想嵌入自己的自定义按钮，其中的默认按钮（插入/删除/等）出于美观目的。 另外，我还想包括一个结果计数，以便用户知道他们正在查看的结果中哪一组。
It took a bit of searching but I ended up combining a few code snippets and thought I would share the results of my endeavor. I hope you find them helpful!
进行了一些搜索，但最终我合并了一些代码片段，并认为我会分享自己的努力成果。 希望对您有所帮助！
Step by step solution:
逐步解决方案：
( skip to the bottom if you want the full source – requires minimal modification )
（如果需要完整的源代码，请跳到底部–只需很少的修改即可）
Step 1:
第1步：
- Would be to create your <cfgrid> and a .cfc to populate it with some data.
-将创建您的<cfgrid>和一个.cfc，以填充一些数据。
Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:
如果您需要有关创建<cfgrid>的帮助，那么这是一个很棒的<cfgrid>教程，因为我在这里不做介绍：
http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids
Step 2:
第2步：
- It is important that the following <script> be placed inside of the <head> </head> tags of your page:
-将以下<script>置于页面的<head> </ head>标记内非常重要：
("YourGridName" should be replaced with the name of your cfgrid )
（“ YourGridName”应替换为cfgrid的名称）
NOTE: You should replace the "showWin" function which with whatever function you want to run as the handler for each button.
注意：您应该用要作为每个按钮的处理程序运行的任何函数替换“ showWin”函数。
<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>
If you only want to add buttons (no result set count) change the following to false: displayInfo: true,
如果您只想添加按钮（无结果集计数），请将以下内容更改为false：displayInfo：true，
If you only want the result set count remove the following:
如果只希望结果集计数，请删除以下内容：
,
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
Step 3:
第三步：
- Calling your init script - place the following code after your <cfgrid> inside the <body> tag:
-调用您的初始化脚本-在<body>标记内的<cfgrid>之后放置以下代码：
<cfset ajaxOnLoad("init")>
CONCLUSION:
结论：
Using the script provided you should be able to add as many buttons as space provides to the bottom of your cfgrid, and have the current result set count at the bottom right side of your bar.
使用提供的脚本，您应该能够在cfgrid底部添加尽可能多的按钮，并在条形图的右下方显示当前结果集的数量。
I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work
我在下面附加了一个演示页，但是您需要用自己的<cfgrid>替换它，并在init函数中替换“ YourGridName”以使其正常工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Buttons & Paging in the toolbar</title>
<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>
</head>
<body>
<cfform name="YourGridFormName">
<!--- Replace the following with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
format="html"
pagesize="25"
striperows="yes"
gridlines="yes"
selectmode="row"
bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})"
onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
{cfgridrow},
{cfgridchanged})">
<cfgridcolumn name="myCol1" header="Column 1" width="100"/>
<cfgridcolumn name="myCol2" header="Column 2" width="100"/>
<cfgridcolumn name="myCol3" header="Column 3" width="100"/>
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
References Used ( The above code is a combination of the following ):
使用的引用（上面的代码是以下内容的组合）：
http://www.coldfusion-ria.com/Blog/index.cfm/2009/7/24/Adding-Ext-JS-Buttons-to-ColdFusion-9-cfgrid-Paging-Toolbar http://www.coldfusion-ria.com/Blog/index.cfm/2009/7/24/Adding-Ext-JS-Buttons-to-ColdFusion-9-cfgrid-Paging-Toolbar
http://csm2kh.blogspot.com/2008/10/extjs-grid-button-in-pagingtoolbar.html http://csm2kh.blogspot.com/2008/10/extjs-grid-button-in-pagingtoolbar.html
漂亮的分页工具栏
扫一扫
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
