PDA

View Full Version : [CLOSED] Scrolling ListFilter



cwolcott
May 24, 2012, 5:18 PM
I thought I saw an example of a ListFilter on a grid column that had many choices (70+) and allowed scrolling of the items in the list filter. Any ideas?

Daniil
May 24, 2012, 9:17 PM
Hi,

Currently, it is not supported.

We are going to add scrolling support. Generally, it's enough to just set up Height for Menu to get scrolling.

But there is a bug in ExtJS which breaks scrolling for all Menu subclasses. We will report it to Sencha.

For now, we can suggest the following solution - override the ListFilter createMenu function. Please see the comments in JavaScript.

Example

<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myCreateMenu = function (config) {
var menuCfg = config.menuItems ? {items : config.menuItems} : {},
menu;

Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,opt ions");
Ext.apply(menuCfg, {
height : 100 ///!!! to get scrolling
});

menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
menu.self.xtype = "menu"; //!!! workaround for ExtJS bug
menu.on('checkchange', this.onCheckChange, this);

return menu;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" />
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server">
<Filters>
<ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
</CustomConfig>
</ext:ListFilter>
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</body>
</html>

cwolcott
May 25, 2012, 12:18 PM
Thanks. Works great. Please close the thread. Did you report the bug the Sencha? I couldn't find the thread last night.

Daniil
May 25, 2012, 3:22 PM
I have just reported:
http://www.sencha.com/forum/showthread.php?208854

Just spent some time to prepare a good report. A good report increases our chances ExtJS team will review it:)

cwolcott
May 25, 2012, 5:32 PM
Thanks for the bug post to Sencha.

Because of the number of items that are displayed in 2 out of 6 of the list filters (856 and 2976 items) I will need to come up with an alternate way to filter the grid panel for those columns. The lists take anywhere from 3 - 8 seconds to display each time and navigation is cumbersome since there is no scrollbar or the navigation keys (home, end, pageup, pagedown) don't work.

Daniil
May 28, 2012, 12:44 PM
cumbersome since there is no scrollbar or the navigation keys (home, end, pageup, pagedown) don't work.

Well, it is the browser functionality and, indeed, works with the native scrollbar only.

Example

<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.my-div {
overflow: scroll;
height: 200px;
}

.my-nested-div {
height: 500px;
}
</style>
</head>
<body>
<div class="my-div">
<div class="my-nested-div"></div>
</div>
</body>
</html>


You could set up

autoScroll : true
in a menu config to get native scrolling.

Example

<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myCreateMenu = function (config) {
var menuCfg = config.menuItems ? {items : config.menuItems} : {},
menu;

Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,opt ions");
Ext.apply(menuCfg, {
height : 100,
autoScroll : true
});

menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
menu.on('checkchange', this.onCheckChange, this);

return menu;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" />
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server">
<Filters>
<ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
</CustomConfig>
</ext:ListFilter>
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</body>
</html>

But the main problem in your case appears to be this one.

The lists take anywhere from 3 - 8 seconds to display each time

Do you use Store for ListFilter and does it load items each time you open the filter? Or do you use just Options?

Probably, you will, indeed, have to come up with an alternative solution. Maybe, with remote paging. But before we suggest you something, I would want to sort it out why it takes too much time to show the items and why it happens each time. Maybe, we could somehow fix it. Could you provide a sample to reproduce?

Daniil
Sep 05, 2012, 6:07 PM
I have just reported:
http://www.sencha.com/forum/showthread.php?208854


It has been fixed. The fix is included it Ext.NET v2.1, revision #4332.

Also we added the MenuConfig property for the ListFilter class.

Here is the example how clear it looks now.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" />
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server">
<Filters>
<ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
<MenuConfig runat="server" Height="100" />
</ext:ListFilter>
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</body>
</html>

It produces the same result as my previous example does.
http://forums.ext.net/showthread.php?19185&p=82702&viewfull=1#post82702

Thanks for the question. It led us to improve Ext.NET!