Dec 03, 2012, 6:03 PM
[CLOSED] not contain any records you can display a message centered on the grid
I'm using the example below
The scroll bar is displayed correctly.
If you pull the scroll bar to the right and click the cancel button is displayed the message but I want the scroll bar disappears.
I believe the problem is in css property on display
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ 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="Head1" runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var onLoadGrid = function (store, records, grid) {
if (records.length === 0) {
grid.view.scroller.addClass("DisplayTextNoRecordsGrid");
grid.view.mainBody.update('Sem registros para exibir');
} else {
grid.view.scroller.removeClass("DisplayTextNoRecordsGrid");
}
}
</script>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var applyFilter = function (field) {
var v = field.el.dom.value;
if(field){
var id = field.id,
task = new Ext.util.DelayedTask(function(){
var f = Ext.getCmp(id);
f.focus();
f.el.dom.value = f.el.dom.value;
});
task.delay(100);
}
#{GridPanel1}.getStore().filterBy(getRecordFilter());
};
var clearFilter = function () {
#{Filtertest1}.reset();
#{Filtertest2}.reset();
#{Filtertest3}.reset();
#{GridPanel1}.getStore().clearFilter();
}
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (typeof val != "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};
var filterDate = function (value, dataIndex, record) {
var val = record.get(dataIndex).clearTime(true).getTime();
if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
return false;
}
return true;
};
var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (!Ext.isEmpty(value, false) && val != value) {
return false;
}
return true;
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{Filtertest1}.getValue(), 'test1', record);
}
});
f.push({
filter: function (record) {
return filterString(#{Filtertest2}.getValue(), 'test1', record);
}
});
f.push({
filter: function (record) {
return filterString(#{Filtertest3}.getValue(), 'test1', record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
<style type="text/css">
.DisplayTextNoRecordsGrid
{
vertical-align: middle;
display: table-cell;
text-align: center;
font: Tahoma;
font-size: 12pt;
}
</style>
</head>
<body>
<form id="Form2" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport" runat="server">
<Items>
<ext:Panel ID="pnlLayoutMaster" runat="server" Border="true" Frame="false" Layout="VBoxLayout"
MinHeight="29px" Split="True" Height="226">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnlSUtToolbarMaster" runat="server" Border="true" EnableViewState="true"
Height="28">
</ext:Panel>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" TrackMouseOver="true"
Flex="1">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
<Listeners>
<Load Handler="var grid = #{GridPanel1};
if (grid.rendered) {
onLoadGrid(store, records, grid);
}" Delay="10" />
<DataChanged Handler="onLoadGrid(store, this.getRange()||[], #{GridPanel1});" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
<ext:Column Width="28" DataIndex="company" Sortable="false" MenuDisabled="true" Header=" " Fixed="true">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="Filtertest1" runat="server" EnableKeyEvents="true">
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="Filtertest2" runat="server" EnableKeyEvents="true">
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="Filtertest3" runat="server" EnableKeyEvents="true">
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel" OnDirectClick="LoadNothing">
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:Button ID="Button1" runat="server" Text="Load data" OnDirectClick="LoadData" />
</Items>
<Listeners>
<Activate Handler="#{GridPanel1}.store.load();" Single="true" />
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</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;
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LoadData(object sender, DirectEventArgs e)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test11", "test12", "test13" },
new object[] { "test12", "test22", "test23" },
new object[] { "test13", "test32", "test33" }
};
store.DataBind();
}
protected void LoadNothing(object sender, DirectEventArgs e)
{
Store store = this.GridPanel1.GetStore();
store.DataBind();
}
}
}
I click the Load button date after reduziro the screen size enough to hide the cancel button.The scroll bar is displayed correctly.
If you pull the scroll bar to the right and click the cancel button is displayed the message but I want the scroll bar disappears.
I believe the problem is in css property on display
.DisplayTextNoRecordsGrid
{
vertical-align: middle;
display: table-cell;
text-align: center;
font: Tahoma;
font-size: 12pt;
}
Last edited by Daniil; Dec 12, 2012 at 11:13 AM.
Reason: [CLOSED]