PDA

View Full Version : [CLOSED] GridView override portability issue



vadym.f
Aug 15, 2013, 1:33 PM
Hi,

Please help me properly migrate the following GridView override from 1.x to 2.x.

Edit in: This thread is related to existing 1.x thread at http://forums.ext.net/showthread.php?24282-CLOSED-Non-hideable-columns-look-in-the-column-menu-selector



// Display non-hideable columns as checked off and disabled in the column menu selector
Ext.override(Ext.grid.GridView, {
beforeColMenuShow: function () {
var colModel = this.cm,
colCount = colModel.getColumnCount(),
colMenu = this.colMenu,
i;

colMenu.removeAll();

for (i = 0; i < colCount; i++) {
if (!colModel.getColumnHeader(i) || colModel.getColumnHeader(i).trim() == "") continue;
colMenu.add(new window.Ext.menu.CheckItem({
text: colModel.getColumnHeader(i),
itemId: 'col-' + colModel.getColumnId(i),
checked: !colModel.isHidden(i),
disabled: colModel.config[i].hideable === false,
hideOnClick: false
}));
}
}
});

Daniil
Aug 15, 2013, 2:31 PM
Hi Vadym,

Here it is.

Example

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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.grid.header.Container.override({
getColumnMenu: function(headerContainer) {
var menuItems = [],
i = 0,
item,
//items = headerContainer.query('>gridcolumn[hideable]'),
items = headerContainer.query('>gridcolumn'),
itemsLn = items.length,
menuItem;

for (; i < itemsLn; i++) {
item = items[i];
menuItem = new Ext.menu.CheckItem({
text: item.menuText || item.text,
checked: !item.hidden,
hideOnClick: false,
headerId: item.id,
menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
checkHandler: this.onColumnCheckChange,
scope: this,
disabled: !!item.hideable //added
});
menuItems.push(menuItem);

// If the header is ever destroyed - for instance by dragging out the last remaining sub header,
// then the associated menu item must also be destroyed.
item.on({
destroy: Ext.Function.bind(menuItem.destroy, menuItem)
});
}
return menuItems;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" Hideable="false" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

If you have a chance, please cross-link it with the initial 1.x thread if exists.

vadym.f
Aug 15, 2013, 3:48 PM
Thanks a lot for the quick response Daniil! Is there any way to examine the header of the column in the override you've provided? I would like to ignore columns with empty headers. The implementation of an empty header seems to assign the * character to the item text property so I'd like to avoid a dumb check like this in the override:


if (item.text == "*") continue;

Daniil
Aug 15, 2013, 4:18 PM
I think it is possible. I would exclude such columns for this collection.

items = headerContainer.query('>gridcolumn')

That should be enough.

vadym.f
Aug 15, 2013, 4:33 PM
I think it is possible. I would exclude such columns for this collection.

items = headerContainer.query('>gridcolumn')

That should be enough.

Sorry, I didn't follow. Do I have to modify the query criteria to exclude empty headers columns?

Baidaly
Aug 15, 2013, 11:43 PM
Hello!

Yes, you have to change your query according to this: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Query



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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.grid.header.Container.override({
getColumnMenu: function (headerContainer) {
var menuItems = [],
i = 0,
item,
//items = headerContainer.query('>gridcolumn[hideable]'),
//items = headerContainer.query('>gridcolumn'),
items = headerContainer.query('>gridcolumn[text!="*"]'),
itemsLn = items.length,
menuItem;

for (; i < itemsLn; i++) {
item = items[i];
menuItem = new Ext.menu.CheckItem({
text: item.menuText || item.text,
checked: !item.hidden,
hideOnClick: false,
headerId: item.id,
menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
checkHandler: this.onColumnCheckChange,
scope: this,
disabled: !!item.hideable //added
});
menuItems.push(menuItem);

// If the header is ever destroyed - for instance by dragging out the last remaining sub header,
// then the associated menu item must also be destroyed.
item.on({
destroy: Ext.Function.bind(menuItem.destroy, menuItem)
});
}
return menuItems;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" Hideable="false" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

vadym.f
Aug 16, 2013, 12:55 AM
Thanks Daulet! But is there any actual property or method, independent of internal implementation details, to check for empty headers?

Baidaly
Aug 16, 2013, 1:24 AM
I'm not quite understand you. All your headers are in items collection in this method. Header can be check by using item.text property.

vadym.f
Aug 16, 2013, 2:33 AM
Never mind, I was just curious if a method like isEmpty() was available to check the header. Examining the text property is good enough for me as long as the implementation of empty header by means of * character remains consistent. You can mark this thread as closed.

Daniil
Aug 16, 2013, 3:42 AM
There is no such a method to check a header on emptiness.