Apr 11, 2014, 11:27 AM
[CLOSED] Mask is not showing with custom message. Scrollbar is not getting for gridpanel, Radiobutton group functionality.
Hi,
We are upgrading Ext V1.7 to V2.5.
I am facing few issues in one my screen Home after upgrading from V1.7 to V2.5. Below are the issues and find the sample code below.
1) Notification Inbox:
Previously to reload data i have used gridpanel, with this the application is worked perfectly, with recent change i.e. store.reload, getting above issues.
2) Announcements:
3) MyStuff (Ease panel)
What is the layout type do i need to use to set Panel to whole screen?
Can you suggest me the code snippet to clear selections of GridPanel on RowSelection "Select" handler?
After pageload getting JS error like "Uncaught No URL specified", what is the cause and solution?
Please find the attached screen shots for your reference.
Code:
We are upgrading Ext V1.7 to V2.5.
I am facing few issues in one my screen Home after upgrading from V1.7 to V2.5. Below are the issues and find the sample code below.
1) Notification Inbox:
- Loading mask is not showing on any action with custom message
- Height of the gridpanel should fit to screen, the Paging toolbar has to display on bottom of the page.
- On click of Options >> Filter items, handler "FilterInbox" is calling, in this handler i am setting values to Radio buttons, at this time RadioButton change event "LoadSelectedInboxItems" also firing, hence the data on inbox gridpanel loading multiple times. If you observe because of "
" this code checkbox direct events are calling no of times.(for each checkbox )ResourceManager1.AddScript("StoreInboxPaged.reload({params:{start:0,limit:15}});"); - On click of Radio buttons, calling direct event "UpdateInboxTypeIDs", on this event trying to reload the store, data is loading multiple times.
Previously to reload data i have used gridpanel, with this the application is worked perfectly, with recent change i.e. store.reload, getting above issues.
2) Announcements:
- Loading mask is not showing with custom message
- Scrollbar is not getting for gridPanel.
3) MyStuff (Ease panel)
- By default all panels should be collapsed.
What is the layout type do i need to use to set Panel to whole screen?
Can you suggest me the code snippet to clear selections of GridPanel on RowSelection "Select" handler?
After pageload getting JS error like "Uncaught No URL specified", what is the cause and solution?
Please find the attached screen shots for your reference.
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HomeInbox.aspx.cs" Inherits="Ext.Net.Examples.RealtimeSamples.HomeInbox" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head2" runat="server">
<title>The Magazine Manager</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
.inbox-item
{
font: normal 11px tahoma, arial, helvetica, sans-serif;
padding: 3px 0px 0px 70px;
display: block;
clear: both;
color: #555;
}
</style>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
/*To resolve js error: Cannot read property 'isCollapsedPlaceholder' of undefined. Written below override function*/
Ext.view.Table.override({
indexInStore: function (node) {
node = (node && node.isCollapsedPlaceholder) ? this.getNode(node) : this.getNode(node, false);
if (!node && node !== 0) {
return -1;
}
var recordIndex = node.getAttribute('data-recordIndex');
if (recordIndex) {
return parseInt(recordIndex, 10);
}
return this.dataSource.indexOf(this.getRecord(node));
}
});
var loadedInboxTypeIDs = '';
var FilterInbox = function (param1, param2) {
if (loadedInboxTypeIDs == newInboxItems) {
return;
}
rdAll.setValue(false);
rdCallBack.setValue(false);
rdMeeting.setValue(false);
var newInboxItems = '';
if (param1.id == 'CheckMenuItemInboxFilter') {
newInboxItems = '1,2';
rdAll.setValue(true);
}
else if (param1.id == 'CheckMenuItemInboxFilter1') {
newInboxItems = '1';
rdMeeting.setValue(true);
}
else if (param1.id == 'CheckMenuItemInboxFilter2') {
newInboxItems = '2';
rdCallBack.setValue(true);
}
Ext.net.DirectMethods.FilterInbox(newInboxItems);
loadedInboxTypeIDs = newInboxItems;
}
var LoadSelectedInboxItems = function (rdGroup, selectedButton) {
if (selectedButton == null || selectedButton["rdogrpNotification_Group"] == undefined) //return if selectedButton is null or undefined
return;
if (loadedInboxTypeIDs == selectedButton["rdogrpNotification_Group"]) { //return if same selection has been repeated.
return;
}
Ext.net.DirectMethods.FilterInbox(selectedButton["rdogrpNotification_Group"]);
loadedInboxTypeIDs = selectedButton["rdogrpNotification_Group"];
}
</script>
</ext:XScript>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="">
</ext:ResourceManager>
<ext:Store runat="server" ID="StoreInboxPaged" AutoLoad="true" OnReadData="RefreshData"
PageSize="15">
<Listeners>
<DataChanged Handler="#{gridPanelInbox}.getRowExpander().collapseAll(); " Delay="10" />
</Listeners>
<Model>
<ext:Model ID="Model2" IDProperty="Name" runat="server">
<Fields>
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Price" Type="String" />
<ext:ModelField Name="Type" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store runat="server" ID="StoreAnnouncement" AutoLoad="true" OnReadData="RefreshData1">
<Model>
<ext:Model ID="Model3" IDProperty="Name" runat="server">
<Fields>
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Price" Type="String" />
<ext:ModelField Name="Type" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:TabPanel ID="TabPanel1" Border="false" runat="server" ActiveTabIndex="0" Plain="true"
EnableViewState="false" Region="Center">
<Items>
<ext:Panel ID="TabHome" runat="server" Closable="false" Title="Home" Layout="ColumnLayout">
<Items>
<%--Inbox Start--%>
<ext:Panel ID="ColumnLayoutHome1" runat="server" ColumnWidth="0.5" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanelInbox" runat="server" StoreID="StoreInboxPaged" StyleSpec="padding:4px 2px 4px 4px;"
Border="true" AnimCollapse="true" Title="Notification Inbox" AutoScroll="true"
ForceFit="true">
<TopBar>
<ext:Toolbar ID="ToolbarInbox" runat="server">
<Items>
<ext:Button ID="MenuButtonInbox" runat="server" Text="Options">
<Menu>
<ext:Menu ID="MenuInbox1" runat="server">
<Items>
<ext:MenuItem ID="MenuItemInbox6" runat="server" Text="Filter">
<Menu>
<ext:Menu ID="MenuInbox4" runat="server">
<Items>
<ext:CheckMenuItem ID="CheckMenuItemInboxFilter" runat="server" Text="All" Group="Filter"
Checked="true">
<Listeners>
<Click Fn="FilterInbox">
</Click>
</Listeners>
</ext:CheckMenuItem>
<ext:CheckMenuItem ID="CheckMenuItemInboxFilter1" runat="server" Text="Meetings 1" Group="Filter">
<Listeners>
<Click Fn="FilterInbox" />
</Listeners>
</ext:CheckMenuItem>
<ext:CheckMenuItem ID="CheckMenuItemInboxFilter2" runat="server" Text="Callbacks 2" Group="Filter">
<Listeners>
<Click Fn="FilterInbox" />
</Listeners>
</ext:CheckMenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
<ext:MenuItem ID="MenuItemInbox3" runat="server" Text="Display">
<Menu>
<ext:Menu ID="MenuInbox3" runat="server">
<Items>
<ext:CheckMenuItem ID="CheckMenuItemInbox1" runat="server" Text="Meetings 1" Enabled="false"
Checked="true">
<DirectEvents>
<CheckChange OnEvent="UpdateInboxTypeIDs">
<ExtraParams>
<ext:Parameter Name="InboxTypeID" Value="1" />
</ExtraParams>
</CheckChange>
</DirectEvents>
</ext:CheckMenuItem>
<ext:CheckMenuItem ID="CheckMenuItemInbox2" runat="server" Text="Callbacks 2">
<DirectEvents>
<CheckChange OnEvent="UpdateInboxTypeIDs">
<ExtraParams>
<ext:Parameter Name="InboxTypeID" Value="2" />
</ExtraParams>
</CheckChange>
</DirectEvents>
</ext:CheckMenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:RadioGroup ID="rdogrpNotification" runat="server" Vertical="false" ColumnsWidths="40,80,80,80"
StyleSpec="" AnchorHorizontal="100%">
<Listeners>
<Change Fn="LoadSelectedInboxItems" />
</Listeners>
<Items>
<ext:Radio ID="rdAll" runat="server" BoxLabel="All" InputValue="1,2">
</ext:Radio>
<ext:Radio ID="rdMeeting" runat="server" BoxLabel="Meetings 1" InputValue="1">
</ext:Radio>
<ext:Radio ID="rdCallBack" runat="server" BoxLabel="Callbacks 2" InputValue="2">
</ext:Radio>
</Items>
</ext:RadioGroup>
<ext:ToolbarFill>
</ext:ToolbarFill>
<ext:Button runat="server" ID="ToolbarInboxRefresh" Icon="EmailTransfer">
<Listeners>
<Click Handler="#{StoreInboxPaged}.reload();" />
</Listeners>
<ToolTips>
<ext:ToolTip AutoWidth="true" ID="ToolTipInbox1" runat="server" Html="Check Inbox" />
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer>
</ext:ToolbarSpacer>
<ext:ToolbarSpacer>
</ext:ToolbarSpacer>
<ext:ToolbarSpacer>
</ext:ToolbarSpacer>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column DataIndex="Name" ID="Name" Align="Left" runat="server" Flex="1">
</ext:Column>
<ext:Column ID="Price" DataIndex="Price" Align="Right" runat="server">
</ext:Column>
<ext:Column ID="Column1" DataIndex="Type" Align="Right" runat="server">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" ShowHeaderCheckbox="false"
CheckOnly="True">
</ext:CheckboxSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridViewInbox1" runat="server" TrackOver="true">
</ext:GridView>
</View>
<Plugins>
<ext:RowExpander ID="RowExpanderInbox1" runat="server" EnableCaching="False">
<Template ID="TemplateInbox1" runat="server">
<Html>
<tpl>
<div class="inbox-item-left">From: {Name}</div>
</tpl>
</Html>
</Template>
</ext:RowExpander>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="StoreInboxPaged" BeforePageText="Page"
EmptyMsg="" DisplayMsg="{0}-{1} of {2}">
</ext:PagingToolbar>
</BottomBar>
<Loader ID="Loader2" runat="server" Mode="Frame">
<LoadMask ShowMask="true" Msg="Loading Inbox..." />
</Loader>
</ext:GridPanel>
</Items>
</ext:Panel>
<%--Inbox End--%>
<%--Announcements Start--%>
<ext:Panel ID="Panel1" runat="server" ColumnWidth="0.5" AutoScroll="true" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanelAnnouncement" runat="server" StyleSpec="padding:4px 4px 4px 2px;"
Border="true" StoreID="StoreAnnouncement" AnimCollapse="true" Title="Announcements"
HideHeaders="true">
<TopBar>
<ext:Toolbar ID="ToolbarAnnouncement" runat="server">
<Items>
<ext:Button runat="server" ID="ToolbarAnnouncementRefresh" Icon="PageWhiteRefresh">
<Listeners>
<Click Handler="#{StoreAnnouncement}.reload();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTipAnnouncement1" runat="server" Html="Check Announcements" />
</ToolTips>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:ImageCommandColumn ID="ImageCommandColumn1" ColumnID="Commands" runat="server"
Flex="1">
<Commands>
<ext:ImageCommand CommandName="view" Icon="PageWhiteMagnify" Text="">
<ToolTip Text="View in Full Page" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="edit" Icon="PageWhiteEdit" Text="">
<ToolTip Text="Edit" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="moveup" Icon="PageWhiteGet" Text="">
<ToolTip Text="Move Up" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="movedown" Icon="PageWhitePut" Text="">
<ToolTip Text="Move Down" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="delete" Icon="PageWhiteDelete" Text="">
<ToolTip Text="Delete Announcement" />
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" />
</View>
<Features>
<ext:RowBody ID="RowBody1" runat="server">
<GetAdditionalData Handler="orig.rowBody = '<div class=announcement-item>' + data.Name + '</div>';" />
</ext:RowBody>
</Features>
<Loader ID="Loader1" runat="server" Mode="Frame">
<LoadMask ShowMask="true" Msg="Loading Announcements..." />
</Loader>
</ext:GridPanel>
</Items>
</ext:Panel>
<%--Announcements End--%>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel ID="Panel2" runat="server" Title="My Stuff" Region="East" Collapsible="true"
Collapsed="true" Split="true" Width="275" Layout="AccordionLayout" ButtonAlign="Center">
<Items>
<ext:Panel ID="PanelContactInfo" runat="server" Border="false" Collapsible="true"
Icon="VCard" Title="Contact Info" ButtonAlign="Center" Collapsed="true" BodyStyle="padding:10px;"
Html="Account Info">
</ext:Panel>
<ext:Panel ID="PanelMyGoals" runat="server" Border="false" Collapsible="true" Icon="ChartBar"
Title="Sales Goals" Collapsed="true" Html="Goals"> </ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<div class="x-hide-display">
<ext:Hidden runat="server" ID="HiddenInboxStatus">
</ext:Hidden>
<ext:Hidden runat="server" ID="HiddenInboxTypeIDs">
</ext:Hidden>
</div>
</form>
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Data;
namespace Ext.Net.Examples.RealtimeSamples
{
public partial class HomeInbox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !Ext.Net.X.IsAjaxRequest)
{
SetupInbox();
SetupAnnouncements();
}
}
public void RefreshData(Object sender, StoreReadDataEventArgs e)
{
start = 1;
end = 15;
filter();
StoreInboxPaged.DataSource = compList;
StoreInboxPaged.DataBind();
}
public void RefreshData1(Object sender, StoreReadDataEventArgs e)
{
start = 1;
end = 30;
SetupAnnouncements();
}
public void SetupInbox()
{
HiddenInboxTypeIDs.Text = "1,2";
string[] InboxTypeIDs = HiddenInboxTypeIDs.Text.Split(',');
if (Array.IndexOf(InboxTypeIDs, "1") >= 0)
CheckMenuItemInbox1.Checked = true;
else
CheckMenuItemInbox1.Checked = false;
if (Array.IndexOf(InboxTypeIDs, "2") >= 0)
CheckMenuItemInbox2.Checked = true;
else
CheckMenuItemInbox2.Checked = false;
rdAll.Checked = true;
StoreInboxPaged.DataSource = Data();
StoreInboxPaged.DataBind();
}
public void SetupAnnouncements()
{
end = 30;
StoreAnnouncement.DataSource = Data();
StoreAnnouncement.DataBind();
}
[DirectMethod()]
public void FilterInbox(string InboxTypeID)
{
HiddenInboxTypeIDs.Text = InboxTypeID;
switch (InboxTypeID)
{
case "1":
CheckMenuItemInboxFilter1.Checked = CheckMenuItemInbox1.Checked = true;
CheckMenuItemInboxFilter2.Checked = CheckMenuItemInbox2.Checked = false;
break;
case "2":
CheckMenuItemInboxFilter1.Checked = CheckMenuItemInbox1.Checked = false;
CheckMenuItemInboxFilter2.Checked = CheckMenuItemInbox2.Checked = true;
break;
default:
CheckMenuItemInboxFilter1.Checked = CheckMenuItemInbox1.Checked = true;
CheckMenuItemInboxFilter2.Checked = CheckMenuItemInbox2.Checked = true;
CheckMenuItemInboxFilter.Checked = true;
break;
}
//reload the inbox grid with the new filter, start at the first page
ResourceManager1.AddScript("StoreInboxPaged.reload({params:{start:0,limit:15}});");
}
public void UpdateInboxTypeIDs(object sender, DirectEventArgs e)
{
string strInboxTypeIDs = "";
string[] InboxTypeIDs = HiddenInboxTypeIDs.Text.Split(',');
string InboxTypeID = e.ExtraParams["InboxTypeID"];
int index = Array.IndexOf(InboxTypeIDs, InboxTypeID);
int i = 0;
if (index >= 0)
{
//remove
for (i = 0; i <= InboxTypeIDs.GetUpperBound(0); i++)
{
if (i != index)
{
if (strInboxTypeIDs.Length > 0)
strInboxTypeIDs += ",";
strInboxTypeIDs += InboxTypeIDs[i];
}
}
}
else
{
//add to the array
for (i = 0; i <= InboxTypeIDs.GetUpperBound(0); i++)
{
if (strInboxTypeIDs.Length > 0)
strInboxTypeIDs += ",";
strInboxTypeIDs += InboxTypeIDs[i];
}
if (strInboxTypeIDs.Length > 0)
strInboxTypeIDs += ",";
strInboxTypeIDs += InboxTypeID;
}
HiddenInboxTypeIDs.Text = strInboxTypeIDs;
ResourceManager1.AddScript("StoreInboxPaged.reload({params:{start:0,limit:15}});");
}
IList<Company> compList = null;
int start, end = 15;
protected IList<Company> Data()
{
IList<Company> list = new List<Company>();
for (int i = start; i < end; i++)
{
int t = ((i % 2) == 1 ? 1 : 2);
list.Add(new Company("3m Co " + i.ToString(), 71.72 * i, t.ToString()));
}
compList = list;
return list;
}
public void filter()
{
if (compList == null)
Data();
for (int i = 0; i < compList.Count - 1; i++)
{
if (!HiddenInboxTypeIDs.Text.Contains(compList[i].Type))
{
compList.RemoveAt(i);
i--;
}
}
}
}
public class Company
{
public Company(string name, double price, string change)
{
this.Name = name;
this.Price = price;
this.Type = change;
}
public Company()
{
}
public string Name { get; set; }
public double Price { get; set; }
public string Type { get; set; }
}
}
Last edited by Daniil; Apr 20, 2014 at 3:56 PM.
Reason: [CLOSED]
Originally Posted by iansriley
