Aug 19, 2015, 1:56 PM
[CLOSED] GridPanel header top border doesn't appear
Hi,
This question is possibly related to the recently raised and fixed bugs:
http://forums.ext.net/showthread.php...dPanel-headers
http://forums.ext.net/showthread.php...View-EmptyText
Please run the code sample below to observe that the top border line of the GridPanel's header doesn't appear when the header is made visible on Store load.
This question is possibly related to the recently raised and fixed bugs:
http://forums.ext.net/showthread.php...dPanel-headers
http://forums.ext.net/showthread.php...View-EmptyText
Please run the code sample below to observe that the top border line of the GridPanel's header doesn't appear when the header is made visible on Store load.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
private object[] TestData
{
get
{
var now = DateTime.Now;
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.HideHeaders = true;
}
}
private void DataBind()
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
this.GridPanel1.HideHeaders = false;
}
protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
{
var store = sender as Store;
if (store == null) return;
var dataSource = store.DataSource;
if (dataSource != null) return;
DataBind();
}
[DirectMethod]
public void Load(int count)
{
this.Store1.DataSource = this.TestData.Take(count);
this.Store1.DataBind();
this.GridPanel1.HideHeaders = false;
}
[DirectMethod]
public void Empty()
{
this.Store1.DataSource = this.TestData.Take(0);
this.Store1.DataBind();
this.GridPanel1.HideHeaders = true;
}
</script>
<script type="text/javascript">
var refreshHandler = function () {
var grid = this.up('gridpanel');
Ext.net.Mask.show({
el: grid
});
grid.getStore().reload({
callback: function () {
Ext.net.Mask.hide();
}
});
};
var load = function () {
var count = 5;
App.direct.Load(count, {
eventMask: { showMask: true, msg: "Loading the Store..." },
success: function (result) {
App.GridPanel1.getView().refresh();
}
});
};
var empty = function () {
App.direct.Empty({
eventMask: { showMask: true, msg: "Emptying the Store..." },
success: function (result) {
App.GridPanel1.getView().refresh();
}
});
};
</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 id="Head1" runat="server">
<title>Ext.Net 2.x</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:FormPanel runat="server" ID="FormPanel1" Region="North" Split="true" Height="200">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="CountryName" ValueField="CountryID"
TypeAhead="true" Editable="true" MinChars="2" SelectOnFocus="true" EmptyText="Select Country..."
FieldLabel="Select Country" QueryMode="Local">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="CountryID">
<Fields>
<ext:ModelField Name="CountryName" />
<ext:ModelField Name="CountryID" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:TextField runat="server" FieldLabel="Description">
</ext:TextField>
<ext:CheckboxGroup ID="CheckboxGroup1" runat="server" Width="300" FieldLabel="Some Options">
<Items>
<ext:Checkbox runat="server" BoxLabel="Option 1" InputValue="1" Checked="true">
</ext:Checkbox>
<ext:Checkbox runat="server" BoxLabel="Option 2" InputValue="2">
</ext:Checkbox>
</Items>
</ext:CheckboxGroup>
<ext:DateField ID="DateField1" runat="server"></ext:DateField>
</Items>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Reset Form" Icon="Cancel">
<Listeners>
<Click Handler="App.FormPanel1.reset();">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:FormPanel>
<ext:GridPanel ID="GridPanel1" runat="server" Flex="1" Region="Center">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
<ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" RefreshHandler="refreshHandler">
<Items>
<ext:Button runat="server" Text="Load">
<Listeners>
<Click Fn="load"></Click>
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Empty">
<Listeners>
<Click Fn="empty"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<View>
<ext:GridView ID="GridView1" runat="server" EmptyText="No records to display.">
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 19, 2015 at 6:16 PM.
Reason: [CLOSED]
