May 26, 2011, 11:22 AM
regarding usercontrol load in runtime
hey i am using an .aspx page as my master page and want to load control pages in it on menu item click but its showing blank one more thing can i show a control page with viewport layout in this master page on menu click
.aspx code
its code is (Window.ascx)
.aspx code
protected void Page_Load(object sender, EventArgs e)
{
this.Tab1.ContentControls.Add(this.Grid1);
this.Tab1.UpdateContent();
}
<ext:Viewport ID="vw1" runat="server">
<Items>
<ext:Panel
ID="Tab1"
runat="server"
Icon="Vcard"
BodyStyle="background-color: transparent;"
Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button3" runat="server" Icon="Application" Text="With menu">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Icon="Accept" Text="Menu 1" Handler="function () {alert('Menu 1');}" />
<ext:MenuItem ID="MenuItem2" runat="server" Icon="Add" Text="Menu 2">
<Listeners>
<Click Handler="alert('Menu 2');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem3" runat="server" Text="Menu 3">
<DirectEvents>
<Click OnEvent="Menu3_Click">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Param" Value="Menu 3" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:MenuItem>
<ext:MenuSeparator ID="MenuSeparator1" runat="server" />
<ext:MenuItem ID="MenuItem4" runat="server" Text="Menu 5" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Viewport>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<gd:Grid ID="Grid1" runat="server" /><script runat="server">
protected void Page_Init(object sender, EventArgs e)
{
this.WindowEditor1.GridStore = this.Store1;
}
protected void ShowDetails(object sender, DirectEventArgs e)
{
string id = e.ExtraParams["id"];
this.WindowEditor1.SetEmployee(TBLCandidatesPersonalInfo.Getcan(id));
this.WindowEditor1.Show();
}
protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
int count;
this.Store1.DataSource = TBLCandidatesPersonalInfo.GetEmployeesFilter(e.Start, e.Limit, e.Sort, e.Dir.ToString(), out count);
e.Total = count;
this.Store1.DataBind();
}
</script>
<script type="text/javascript">
var employeeDetailsRender = function () {
return '<img class="imgEdit" ext:qtip="Click to view/edit additional details" style="cursor:pointer;" src="vcard_edit.png" />';
};
var cellClick = function (grid, rowIndex, columnIndex, e) {
var t = e.getTarget(),
record = grid.getStore().getAt(rowIndex), // Get the Record
columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id
if (t.className == "imgEdit" && columnId == "Details") {
//the ajax call is allowed
return true;
}
//forbidden
return false;
};
</script>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server" RemoteSort="true" OnRefreshData="Store1_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="UsrSysNo">
<Fields>
<ext:RecordField Name="UsrSysNo" />
<ext:RecordField Name="FName" />
<ext:RecordField Name="MName" />
<ext:RecordField Name="LNme" />
<ext:RecordField Name="Initial" />
<ext:RecordField Name="City" />
<ext:RecordField Name="Email" />
<ext:RecordField Name="CreatedDate" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
<ext:RecordField Name="Telephone" />
<ext:RecordField Name="Zip" />
</Fields>
</ext:JsonReader>
</Reader>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="5" Mode="Raw" />
</AutoLoadParams>
<SortInfo Field="LastName" Direction="ASC" />
<Listeners>
<LoadException Handler="Ext.MessageBox.alert('Load failed', response.statusText);" />
</Listeners>
</ext:Store>
<ext:FitLayout ID="FitLayout1" runat="server">
<Items>
<ext:Panel ID="ViewPort1" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="PanelL" runat="server" Title="L" Layout="FitLayout" Border="true">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
Title="Employees"
Header="false"
Height="175"
AutoExpandColumn="Employee">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Employee" Header="Full Name" DataIndex="FName">
<Renderer Handler="return '<b>' + record.data['Initial'] + '</b>,' + record.data['FName']+ '</b>,' + record.data['MName']+ '</b>,' + record.data['LNme']" />
</ext:Column>
<ext:Column Header="LName" DataIndex="LNme" Width="100" />
<ext:DateColumn Header="Created Date" DataIndex="CreatedDate" Format="yyyy-MM-dd" />
<ext:Column Header="City" DataIndex="City" Width="100" />
<ext:Column Header="Telephone" DataIndex="Telephone" Width="100" />
<ext:Column Header="Zip" DataIndex="Zip" Width="100" />
<ext:Column Header="Email" DataIndex="Email" Width="250" />
<ext:Column
ColumnID="Details"
Header="Details"
Width="50"
Align="Center"
Fixed="true"
MenuDisabled="true"
Resizable="false">
<Renderer Fn="employeeDetailsRender"
/>
</ext:Column>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
<Listeners>
<CellClick Fn="cellClick" />
</Listeners>
<DirectEvents>
<CellClick
OnEvent="ShowDetails"
Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{GridPanel1}.body}" />
<ExtraParams>
<ext:Parameter Name="id" Value="params[0].getStore().getAt(params[1]).id" Mode="Raw" />
</ExtraParams>
</CellClick>
</DirectEvents>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:FitLayout>
<uc1:WindowEditor ID="WindowEditor1" runat="server" />its code is (Window.ascx)
<ext:Store runat="server" ID="EmployeesStore">
<Reader>
<ext:JsonReader IDProperty="EmployeeID">
<Fields>
<ext:RecordField Name="UsrSysNo" />
<ext:RecordField Name="FName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Window
ID="EmployeeDetailsWindow"
runat="server"
Icon="Group"
Title="Employee Details"
Width="400"
Height="400"
AutoShow="false"
Modal="true"
Hidden="true"
Layout="Fit">
<Items>
<ext:TabPanel runat="server" ActiveTabIndex="0" Border="false" DeferredRender="false">
<Items>
<ext:Panel
ID="CompanyInfoTab"
runat="server"
Title="Company Info"
Icon="ChartOrganisation"
Padding="5"
Layout="Form">
<Items>
<ext:TextField ID="EmployeeID" runat="server" FieldLabel="Employee ID" Width="250" Disabled="true" />
<ext:TextField ID="Initial" runat="server" FieldLabel="Initial" Width="250" />
<ext:TextField ID="FirstName" runat="server" FieldLabel="First Name" Width="250" />
<ext:TextField ID="mname" runat="server" FieldLabel="Middle Name" Width="250" />
<ext:TextField ID="LastName" runat="server" FieldLabel="Last Name" Width="250" />
<ext:TextField ID="City" runat="server" FieldLabel="City" Width="250" />
<ext:TextField ID="Email" runat="server" FieldLabel="Email" Width="250" />
<ext:TextField ID="CreatedDate" runat="server" FieldLabel="CreatedDate" Width="250" Format="yyyy-M-d" />
<ext:TextField ID="Telephone" runat="server" FieldLabel="Telephone" Width="250" />
<ext:TextField ID="Zip" runat="server" FieldLabel="Zip" Width="250" />
<ext:ComboBox
ID="ReportsTo"
runat="server"
StoreID="EmployeesStore"
FieldLabel="Reports to"
AllowBlank="true"
DisplayField="LastName"
ValueField="EmployeeID"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select an employee..."
Width="250"
/>
<ext:DateField ID="HireDate" runat="server" Width="250" FieldLabel="Hire date" Format="yyyy-M-d" />
<ext:TextField ID="Extension" runat="server" FieldLabel="Extension" Width="250" />
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
<Buttons>
<ext:Button ID="SaveButton" runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click OnEvent="SaveEmployee" Failure="Ext.MessageBox.alert('Saving failed', 'Error during ajax event');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{EmployeeDetailsWindow}.body}" />
<ExtraParams>
<ext:Parameter Name="id" Value="#{EmployeeID1}.getValue()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="CancelButton" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="#{EmployeeDetailsWindow}.hide(null);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
Last edited by Daniil; May 26, 2011 at 11:43 AM.
Reason: Please use [CODE] tags
