is there a way that i can tell when next, previous or last, first is clicked.
Please look at the example.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[] {
new object[] {"test11", "test12", "test13"},
new object[] {"test21", "test22", "test23"},
new object[] {"test31", "test32", "test33"}
};
store.DataBind();
}
}
</script>
<!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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var myFunction = function(grid) {
var buttons = [];
grid.getPagingToolbar().items.each(
function(item) {
if (item.type == "button") {
buttons.push(item);
}
});
var firstButton = buttons[0],
previousButton = buttons[1],
nextButton = buttons[2],
lastButton = buttons[3],
refreshButton = buttons[4];
firstButton.on("click", function() { alert("Clicked firstButton "); });
previousButton.on("click", function() { alert("Clicked previousButton "); });
nextButton.on("click", function() { alert("Clicked nextButton "); });
lastButton.on("click", function() { alert("Clicked lastButton "); });
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Height="100">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="1" />
</BottomBar>
<Listeners>
<AfterRender Handler="myFunction(this);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>