PDA

View Full Version : [CLOSED] Component inside RowExpander no longer has Id in App namespace



anup
Oct 15, 2012, 8:16 PM
Hi,

Getting latest code of 2.1 I am now finding that if I have a component inside a row expander I no longer have access to that component's Id.

For example, I was able to do this just before the row expander code was updated:



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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store1.DataSource = new object[]
{
new object[] { "3m Co", "3M" },
new object[] { "Alcoa Inc", "ALOA" },
new object[] { "Altria Group Inc", "ALT" },
new object[] { "American Express Company", "AMX" }
};
Store1.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Grid - Ext.NET Examples</title>

<style type="text/css">
body { padding:10px; }

.positive { color: green; }
.negative { color: red; }

.company-details { margin:3px; padding:3px; border:1px solid #ccc; background:#fff; }
.perf { float: right; width: 170px; padding:5px; }
</style>

<script type="text/javascript">
var onExpand = function(symbol, nestedGrid) {
// nested grid seems to be empty - App.NestedGrid is not defined
console.log(symbol, nestedGrid);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server" Title="Simple Grid" Height="310" Width="500">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Symbol" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column Text="Company" DataIndex="Company" Flex="1" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" SingleExpand="false">
<Listeners>
<Expand Handler="onExpand(record.data.Symbol, #{NestedGrid});" />
</Listeners>
<Component>
<ext:GridPanel Id="NestedGrid" runat="server" Title="Monthly Average" Height="150" Padding="10">
<Store>
<ext:Store>
<Model>
<ext:Model>
<Fields>
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="PercentChange" Type="Float" />
<ext:ModelField Name="Date" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:DateColumn Text="Last Updated" DataIndex="Date" Format="MM-yyyy" />
<ext:Column Text="Price" DataIndex="Price" Width="50" />
<ext:Column Text="Change" DataIndex="PercentChange" Width="50" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</body>
</html>


Notice the bit of JavaScript to handle onExpand:



var onExpand = function(symbol, nestedGrid) {
// nested grid seems to be empty - App.NestedGrid is not defined
console.log(symbol, nestedGrid);
};


nestedGrid is null. When I look at the View Source, the Ext.NET initialization script has this bit:




{expand:{fn:function(item,record,body,row,rowIndex ){onExpand(record.data.Symbol, App.NestedGrid);}}

When I type App.NestedGrid into Firebug or a console, it is not defined.

Does this approach no longer work with the changes to RowExpander, or is it just something that accidentally slipped through? The code I have is cut down but the original was quite nice - in the onExpand handler I was calling a DirectMethod or web service in the past to get some raw data which I could then load the store with.

Thanks!

Vladimir
Oct 15, 2012, 8:51 PM
Yesterday, we committed RowExpander changes
Now, if Component is used and SingleExpand=false then Component will be cloned for each row (you will be able to expand several rows at one time)
Therefore, if SingleExpand=false then component ID will be ignore (because several such components can be created)

You can set SingleExpand=true if you need to use component ID

Also, RowExpander supports Loader now. All row expander samples were changed to demonstrate changes

anup
Oct 15, 2012, 10:56 PM
Thanks Vladimir.

Setting SingleExpand="true" certainly helps. However, I then get this JavaScript error:


TypeError: this.componentsCache is undefined

In this code:



updateComponentsWidth : function () {
var i,
grid = this.getCmp(),
body,
len = this.componentsCache.length,
item;


Also, the inner grid that does open up is now half hidden behind the scrollbar. To simulate the problem you can change the above JavaScript onExpand function in my original example with this:



var onExpand = function(symbol, nestedGrid) {
var historyData = [
{ "Date": "2012-06-01T00:00:00", "Price": 56.5, "PercentChange": 1.0 },
{ "Date": "2012-05-01T00:00:00", "Price": 56.01, "PercentChange": 1.5 },
{ "Date": "2012-04-01T00:00:00", "Price": 53.2, "PercentChange": 0.2 },
{ "Date": "2012-03-01T00:00:00", "Price": 54.0, "PercentChange": -0.15 },
{ "Date": "2012-02-01T00:00:00", "Price": 55.01, "PercentChange": -0.1 },
{ "Date": "2012-01-01T00:00:00", "Price": 56.0, "PercentChange": 0.0}
];

nestedGrid.getStore().loadData(historyData);
}

Notice the inner grid's scrollbars are partially covered by the outer grid's own scrollbars - in the past the inner grid would fit nicely inside (I happen to use a padding of 10px so it would fit even more nicely inside the outer grid).

I tried to wrap the inner grid with a Container to try and put padding there instead (or to leave the padding on the nested GridPanel) but it made no difference. I suspect the width of the inner component is now ignoring any scrollbars of the outer component, whereas before it wasn't.

Hope that helps reproduce the problem?

Vladimir
Oct 15, 2012, 11:26 PM
Thanks for the report. Fixed in SVN



Also, the inner grid that does open up is now half hidden behind the scrollbar.

I guess it was after the exception is raised. After fixing the issue I cannot reproduce it

anup
Oct 16, 2012, 12:04 AM
Great stuff Vladimir - many thanks for such a swift response. Retested and looks fixed to me. You can mark this as Closed.