Oct 25, 2014, 6:32 AM
Return value to an editing cell
Hi there, I want to create a grid with inline row editing plugin with right button or image button. The objective is I must able to click on the button and pop up a search window. The result from the window will be store to the active cell. I have a few questions here and hope anyone can help. Kindly refer the attachments. (p/s, I am able to get the return value from the search window to parent control)
The issues,
1. The right button show after grid is loaded but i need it to be hidden until i hit "Add Employee".
2. The right button does not show in editing mode
3. I want to call a popup search window (during edit mode) and return value to the cell where the right button belongs to. Error encounters after I hit select on the search window.
Please help! Thanks in advance.
Here below show the sample code,
Webform2.aspx
--------------------
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html>
<head id="Head1" runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script>
// First outer
//-----------------------------------------------------------
function createLvl_1_Window( inTitle, inKeyRef, inURL, inPara, inModal) {
var modalTF
if (inModal==null) {
modalTF = false;
}
else {
modalTF = inModal;
}
var win = parent.Ext.create("Ext.window.Window", {
id: '_OuterWin_',
title: inTitle + ' ' + inKeyRef,
autoScroll: true,
height: 800,
width: 1080,
layout: 'fit',
collapsible: true,
//maximizable: true,
resizable: false,
minimizable: true,
//closeAction: "close",
icon: "Application",
modal: modalTF,
autoLoad: {
maskMsg: "Loading...",
showMask: true,
mode: "frame",
renderer: "frame",
script: false,
url: inURL + inPara
}
});
win.center();
win.show();
};
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true,
fobcode: 'P12345'
}, 'Employee');
grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};
var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
var editOp = function (grid) {
Ext.getCmp('Toolbar1').setDisabled(false);
var sm = grid.getSelectionModel();
// get the selected record
var selectedRecord = sm.getSelection()[0];
var selectedIdx = grid.store.indexOfId(selectedRecord.data.name);
if ( selectedIdx < 0 ) selectedIdx = 0;
grid.store.getAt(selectedIdx).commit();
};
//This delete the phantom row when user click cancel
//
var cancelOp = function (phant) {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
if (phant) {
grid.store.remove(sm.getSelection());
}
Ext.getCmp('Toolbar1').setDisabled(false);
};
//This will pass para to code behind for further validation
//
var validateSave = function () {
var plugin = this.editingPlugin;
if (this.getForm().isValid()) { // local validation
App.direct.ValidateSaveServer(plugin.context.recor d.phantom, this.getValues(false, false, false, true), {
success : function (result) {
if (!result.valid) {
Ext.Msg.alert("Error", result.msg);
return;
}
plugin.completeEdit();
}
});
}
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
<h1>
GridPanel with RowEditor Plugin</h1>
<ext:GridPanel ID="GridPanel1" runat="server" Width="1000" Height="800" Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="2">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
<ext:ModelField Name="fobcode" ServerMapping="FOBCode" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
SaveHandler="validateSave">
<Listeners>
<BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el); " />
<Edit Handler="#{Spot1}.hide(); editOp(#{GridPanel1});" />
<CancelEdit Handler="#{Spot1}.hide(); cancelOp(e.record.phantom);" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" />
</BottomBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
Format="MM/dd/yyyy" Width="100">
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>" AutoDataBind="true" />
</Editor>
</ext:DateColumn>
<ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
MaxValue="150000" />
</Editor>
</ext:NumberColumn>
<ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
<ext:ComponentColumn ID="ComponentColumn3" runat="server" Editor="true" DataIndex="code"
Text="Code" Flex="1">
<Component>
<ext:TextField ID="txtCode" runat="server" Cls="no-padding">
<RightButtons>
<ext:Button ID="Button4" runat="server" Icon="Find">
<Listeners>
<Click Handler="createLvl_1_Window( 'Search FOB', '',
'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
</Listeners>
</ext:Button>
</RightButtons>
</ext:TextField>
</Component>
</ext:ComponentColumn>
<ext:Column ID="Column3" runat="server" Text="Partcode" DataIndex="partcode" Flex="1">
<Editor>
<ext:TextField ID="txtFOBCode" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="pickPC">
<Commands>
<ext:ImageCommand CommandName="pickPC" Icon="TextAlignRight" ToolTip-Text="pickPC">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="createLvl_1_Window( 'Search FOB', '',
'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selecte d.length) ;" />
</Listeners>
</ext:GridPanel>
<ext:Spotlight ID="Spot1" runat="server" />
</form>
</body>
</html>
Webform2 code behind
------------------------------
Imports Ext.Net
Imports ExtX = Ext.Net.X
Public Class WebForm2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtX.IsAjaxRequest Then
Dim store As Store = Me.GridPanel1.GetStore()
store.DataSource = New List(Of Object)() From { _
New With { _
Key .Name = "Bill Foot", _
Key .Email = "bill.foot@object.net", _
Key .Start = New DateTime(2007, 2, 5), _
Key .Salary = 37000, _
Key .FobCode = "COD", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bill Little", _
Key .Email = "bill.little@object.net", _
Key .Start = New DateTime(2009, 6, 13), _
Key .Salary = 53000, _
Key .FobCode = "COO", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bob Jones", _
Key .Email = "bob.jones@object.net", _
Key .Start = New DateTime(2008, 10, 6), _
Key .Salary = 70000, _
Key .PartCode = "Bill Foot", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bob Train", _
Key .Email = "bob.train@object.net", _
Key .Start = New DateTime(2009, 5, 5), _
Key .Salary = 68000, _
Key .FobCode = "COD", _
Key .Active = True _
}, _
New With { _
Key .Name = "Chris Johnson", _
Key .Email = "chris.johnson@object.net", _
Key .Start = New DateTime(2009, 1, 25), _
Key .Salary = 47000, _
Key .FobCode = "COO", _
Key .Active = True _
} _
}
store.DataBind()
End If
End Sub
<DirectMethod()> _
Public Function ValidateSaveServer(isPhantom As Boolean, values As JsonObject) As Object
If Not isPhantom Then
Return New With { _
Key .valid = True _
}
End If
If Not values.ContainsKey("salary") OrElse Convert.ToInt32(values("salary")) < 1000 Then
Return New With { _
Key .valid = False, _
Key .msg = "Salary must be >=1000 for new employee" _
}
End If
Return New With { _
Key .valid = True _
}
End Function
End Class
Search_window.aspx
----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="SearchFOBMaster" runat="server">
<ext:ResourceManager ID="myExtRM" runat="server" DisableViewState="false">
</ext:ResourceManager>
<input id="targetParentFormID" type="hidden" runat="server" />
<div>
<ext:Panel ID="PanelListView" runat="server" Header="false" >
<Items>
<ext:GridPanel ID="PanelGridListView" runat="server" Height="520" Cls="x-grid-custom" AutoScroll="true">
<Store>
<ext:Store ID="StoreGrid1" runat="server" OnReadData="Store_RefreshData"
OnRefreshData="Store_RefreshData">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="rowid">
<Fields>
<ext:ModelField Name="fob_code" />
<ext:ModelField Name="fob_desc" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="fob_code" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:CommandColumn ID="CommandColumn2" runat="server" Width="60">
<Commands>
<ext:GridCommand Icon="Accept" CommandName="Select">
<ToolTip Text="Select this record" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="if (command == 'Select')
{
var sm = parent.App.GridPanel1.getSelectionModel();
var selectedRow= sm.getSelection()[0];
selectedRow.data.fobcode = record.data.fob_code;
parent.App._OuterWin_.hide();
}" />
</Listeners>
</ext:CommandColumn>
</Columns>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="fob_code" Text="FOB Code" Width="120" />
<ext:Column ID="Column3" runat="server" DataIndex="fob_desc" Text="Description" Width="200" Flex="1" />
<ext:Column ID="Column2" runat="server" DataIndex="rowid" Visible="false" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server" OnCreateFilterableField="OnCreateFilterableField"
UpdateBuffer="100" CaseSensitive="False" />
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
<Items>
<ext:Label ID="Label2" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
<ext:ListItem Text="50" />
</Items>
<SelectedItems>
<ext:ListItem Text="20" />
</SelectedItems>
<Listeners>
<Select Handler="onSelect(this, #{PanelGridListView});" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<AfterRender Handler="var pnl = parent.App._OuterWin_.getSize();
this.height=pnl.height-36;
this.width=pnl.width-15;" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Search_window code behind
-------------------------------------
Imports Ext.Net
Imports ExtX = Ext.Net.X
Imports System.Xml
Public Class Search_window
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtX.IsAjaxRequest Then
BindData()
End If
End Sub
Protected Function OnCreateFilterableField(ByVal sender As Object, ByVal column As ColumnBase, ByVal defaultField As Field) As Field
If column.DataIndex = "fob_code" Then
DirectCast(defaultField, TextField).Icon = Icon.Magnifier
End If
Return defaultField
End Function
Protected Sub Store_RefreshData(ByVal sender As Object, ByVal e As StoreReadDataEventArgs)
Me.BindData()
End Sub
Private Sub BindData()
Dim gridData As New List(Of Object)() From { _
New With { _
Key .fob_code = "FOB", _
Key .fob_desc = "FREE ON BOARD", _
Key .rowid = 1 _
}, _
New With { _
Key .fob_code = "COD", _
Key .fob_desc = "CASH ON DELIVERY", _
Key .rowid = 2 _
}, _
New With { _
Key .fob_code = "COO", _
Key .fob_desc = "CASH ON ORDER", _
Key .rowid = 3 _
}, _
New With { _
Key .fob_code = "FOC", _
Key .fob_desc = "FREE OF CHARGE", _
Key .rowid = 4 _
} _
}
StoreGrid1.DataSource = gridData
StoreGrid1.DataBind()
End Sub
End Class
The issues,
1. The right button show after grid is loaded but i need it to be hidden until i hit "Add Employee".
2. The right button does not show in editing mode
3. I want to call a popup search window (during edit mode) and return value to the cell where the right button belongs to. Error encounters after I hit select on the search window.
Please help! Thanks in advance.
Here below show the sample code,
Webform2.aspx
--------------------
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html>
<head id="Head1" runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script>
// First outer
//-----------------------------------------------------------
function createLvl_1_Window( inTitle, inKeyRef, inURL, inPara, inModal) {
var modalTF
if (inModal==null) {
modalTF = false;
}
else {
modalTF = inModal;
}
var win = parent.Ext.create("Ext.window.Window", {
id: '_OuterWin_',
title: inTitle + ' ' + inKeyRef,
autoScroll: true,
height: 800,
width: 1080,
layout: 'fit',
collapsible: true,
//maximizable: true,
resizable: false,
minimizable: true,
//closeAction: "close",
icon: "Application",
modal: modalTF,
autoLoad: {
maskMsg: "Loading...",
showMask: true,
mode: "frame",
renderer: "frame",
script: false,
url: inURL + inPara
}
});
win.center();
win.show();
};
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true,
fobcode: 'P12345'
}, 'Employee');
grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};
var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
var editOp = function (grid) {
Ext.getCmp('Toolbar1').setDisabled(false);
var sm = grid.getSelectionModel();
// get the selected record
var selectedRecord = sm.getSelection()[0];
var selectedIdx = grid.store.indexOfId(selectedRecord.data.name);
if ( selectedIdx < 0 ) selectedIdx = 0;
grid.store.getAt(selectedIdx).commit();
};
//This delete the phantom row when user click cancel
//
var cancelOp = function (phant) {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
if (phant) {
grid.store.remove(sm.getSelection());
}
Ext.getCmp('Toolbar1').setDisabled(false);
};
//This will pass para to code behind for further validation
//
var validateSave = function () {
var plugin = this.editingPlugin;
if (this.getForm().isValid()) { // local validation
App.direct.ValidateSaveServer(plugin.context.recor d.phantom, this.getValues(false, false, false, true), {
success : function (result) {
if (!result.valid) {
Ext.Msg.alert("Error", result.msg);
return;
}
plugin.completeEdit();
}
});
}
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
<h1>
GridPanel with RowEditor Plugin</h1>
<ext:GridPanel ID="GridPanel1" runat="server" Width="1000" Height="800" Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="2">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
<ext:ModelField Name="fobcode" ServerMapping="FOBCode" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
SaveHandler="validateSave">
<Listeners>
<BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el); " />
<Edit Handler="#{Spot1}.hide(); editOp(#{GridPanel1});" />
<CancelEdit Handler="#{Spot1}.hide(); cancelOp(e.record.phantom);" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" />
</BottomBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
Format="MM/dd/yyyy" Width="100">
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>" AutoDataBind="true" />
</Editor>
</ext:DateColumn>
<ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
MaxValue="150000" />
</Editor>
</ext:NumberColumn>
<ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
<ext:ComponentColumn ID="ComponentColumn3" runat="server" Editor="true" DataIndex="code"
Text="Code" Flex="1">
<Component>
<ext:TextField ID="txtCode" runat="server" Cls="no-padding">
<RightButtons>
<ext:Button ID="Button4" runat="server" Icon="Find">
<Listeners>
<Click Handler="createLvl_1_Window( 'Search FOB', '',
'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
</Listeners>
</ext:Button>
</RightButtons>
</ext:TextField>
</Component>
</ext:ComponentColumn>
<ext:Column ID="Column3" runat="server" Text="Partcode" DataIndex="partcode" Flex="1">
<Editor>
<ext:TextField ID="txtFOBCode" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="pickPC">
<Commands>
<ext:ImageCommand CommandName="pickPC" Icon="TextAlignRight" ToolTip-Text="pickPC">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="createLvl_1_Window( 'Search FOB', '',
'Search_window.aspx', '?targetParent=parent.App.GridPanel1', true); " />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selecte d.length) ;" />
</Listeners>
</ext:GridPanel>
<ext:Spotlight ID="Spot1" runat="server" />
</form>
</body>
</html>
Webform2 code behind
------------------------------
Imports Ext.Net
Imports ExtX = Ext.Net.X
Public Class WebForm2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtX.IsAjaxRequest Then
Dim store As Store = Me.GridPanel1.GetStore()
store.DataSource = New List(Of Object)() From { _
New With { _
Key .Name = "Bill Foot", _
Key .Email = "bill.foot@object.net", _
Key .Start = New DateTime(2007, 2, 5), _
Key .Salary = 37000, _
Key .FobCode = "COD", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bill Little", _
Key .Email = "bill.little@object.net", _
Key .Start = New DateTime(2009, 6, 13), _
Key .Salary = 53000, _
Key .FobCode = "COO", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bob Jones", _
Key .Email = "bob.jones@object.net", _
Key .Start = New DateTime(2008, 10, 6), _
Key .Salary = 70000, _
Key .PartCode = "Bill Foot", _
Key .Active = True _
}, _
New With { _
Key .Name = "Bob Train", _
Key .Email = "bob.train@object.net", _
Key .Start = New DateTime(2009, 5, 5), _
Key .Salary = 68000, _
Key .FobCode = "COD", _
Key .Active = True _
}, _
New With { _
Key .Name = "Chris Johnson", _
Key .Email = "chris.johnson@object.net", _
Key .Start = New DateTime(2009, 1, 25), _
Key .Salary = 47000, _
Key .FobCode = "COO", _
Key .Active = True _
} _
}
store.DataBind()
End If
End Sub
<DirectMethod()> _
Public Function ValidateSaveServer(isPhantom As Boolean, values As JsonObject) As Object
If Not isPhantom Then
Return New With { _
Key .valid = True _
}
End If
If Not values.ContainsKey("salary") OrElse Convert.ToInt32(values("salary")) < 1000 Then
Return New With { _
Key .valid = False, _
Key .msg = "Salary must be >=1000 for new employee" _
}
End If
Return New With { _
Key .valid = True _
}
End Function
End Class
Search_window.aspx
----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="SearchFOBMaster" runat="server">
<ext:ResourceManager ID="myExtRM" runat="server" DisableViewState="false">
</ext:ResourceManager>
<input id="targetParentFormID" type="hidden" runat="server" />
<div>
<ext:Panel ID="PanelListView" runat="server" Header="false" >
<Items>
<ext:GridPanel ID="PanelGridListView" runat="server" Height="520" Cls="x-grid-custom" AutoScroll="true">
<Store>
<ext:Store ID="StoreGrid1" runat="server" OnReadData="Store_RefreshData"
OnRefreshData="Store_RefreshData">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="rowid">
<Fields>
<ext:ModelField Name="fob_code" />
<ext:ModelField Name="fob_desc" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="fob_code" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:CommandColumn ID="CommandColumn2" runat="server" Width="60">
<Commands>
<ext:GridCommand Icon="Accept" CommandName="Select">
<ToolTip Text="Select this record" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="if (command == 'Select')
{
var sm = parent.App.GridPanel1.getSelectionModel();
var selectedRow= sm.getSelection()[0];
selectedRow.data.fobcode = record.data.fob_code;
parent.App._OuterWin_.hide();
}" />
</Listeners>
</ext:CommandColumn>
</Columns>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="fob_code" Text="FOB Code" Width="120" />
<ext:Column ID="Column3" runat="server" DataIndex="fob_desc" Text="Description" Width="200" Flex="1" />
<ext:Column ID="Column2" runat="server" DataIndex="rowid" Visible="false" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server" OnCreateFilterableField="OnCreateFilterableField"
UpdateBuffer="100" CaseSensitive="False" />
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
<Items>
<ext:Label ID="Label2" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
<ext:ListItem Text="50" />
</Items>
<SelectedItems>
<ext:ListItem Text="20" />
</SelectedItems>
<Listeners>
<Select Handler="onSelect(this, #{PanelGridListView});" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<AfterRender Handler="var pnl = parent.App._OuterWin_.getSize();
this.height=pnl.height-36;
this.width=pnl.width-15;" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Search_window code behind
-------------------------------------
Imports Ext.Net
Imports ExtX = Ext.Net.X
Imports System.Xml
Public Class Search_window
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtX.IsAjaxRequest Then
BindData()
End If
End Sub
Protected Function OnCreateFilterableField(ByVal sender As Object, ByVal column As ColumnBase, ByVal defaultField As Field) As Field
If column.DataIndex = "fob_code" Then
DirectCast(defaultField, TextField).Icon = Icon.Magnifier
End If
Return defaultField
End Function
Protected Sub Store_RefreshData(ByVal sender As Object, ByVal e As StoreReadDataEventArgs)
Me.BindData()
End Sub
Private Sub BindData()
Dim gridData As New List(Of Object)() From { _
New With { _
Key .fob_code = "FOB", _
Key .fob_desc = "FREE ON BOARD", _
Key .rowid = 1 _
}, _
New With { _
Key .fob_code = "COD", _
Key .fob_desc = "CASH ON DELIVERY", _
Key .rowid = 2 _
}, _
New With { _
Key .fob_code = "COO", _
Key .fob_desc = "CASH ON ORDER", _
Key .rowid = 3 _
}, _
New With { _
Key .fob_code = "FOC", _
Key .fob_desc = "FREE OF CHARGE", _
Key .rowid = 4 _
} _
}
StoreGrid1.DataSource = gridData
StoreGrid1.DataBind()
End Sub
End Class