PDA

View Full Version : [CLOSED] Accordion



Akpenob
Aug 25, 2013, 3:41 PM
Hello support

i was wondering if there is by any change that you can get the inner ID for the panel that has been created when you use a accordain layout...?

My senario is like this..

I have a grid panel inside a panel that has a layout type accordian, i also have a second panel that also resides in the accordian layout for some other content..

now lets say i want to access the panel where the gridpanel is and replace the content with somthing new..
how do i get the panel id of the first accordian insted of getting the top panel of the entire layout...?

I have tried to find the id for first panel in the accordian layout, but the only thing i can find is the id for the gridpanel that resides inside the layout and not the panel that has been created to contain the grid itself...

Best regards

Akpenob

Daniil
Aug 26, 2013, 6:42 AM
Hi @Akpenob,

I am afraid I do not understand the requirement, but:

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>

<script>
var iterate = function () {
var p = App.Panel1,
items = p.items.getRange(),
i;

for (i = 0; i < items.length; i++) {
console.log(items[i].id);
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel ID="Panel1" runat="server" Layout="AccordionLayout" Height="200">
<Items>
<ext:Panel ID="Panel11" runat="server" Title="Item 1" />
<ext:Panel ID="Panel12" runat="server" Title="Item 2" />
</Items>
</ext:Panel>

<ext:Button runat="server" Text="Iterate" Handler="iterate" />
</form>
</body>
</html>

Akpenob
Aug 26, 2013, 7:55 AM
Hi @Danill

My senario is more like this




<%@ 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>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel ID="Panel1" runat="server" Layout="AccordionLayout" Height="200">
<Items>
<ext:GridPanel ID="grid1" runat="server" Title="Item 1" /> // <------ replace item and show a mask
<ext:Panel ID="Panel12" runat="server" Title="Item 2" />
</Items>
</ext:Panel>

<ext:Button runat="server" Text="Iterate" Handler="iterate" />
</form>
</body>
</html>


So my question is, is there anyway to replace the content of the accordion without the need to recreated the whole "Panel1"....?

Daniil
Aug 26, 2013, 12:18 PM
Seems I understand now what you mean. Are you going to find some Panel which automatically wraps the GridPanel? If so, a GridPanel is a Panel itself. It doesn't require wrapping in a Panel.

You can replace an item this way.

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>

<script>
var replace = function () {
var newItem = {
title: "New Item"
};

App.Panel1.suspendLayout = true;
App.GridPanel1.destroy();
App.Panel1.insert(0, newItem);
App.Panel1.suspendLayout = false;
App.Panel1.doLayout();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Replace" Handler="replace" />

<ext:Panel ID="Panel1" runat="server" Layout="AccordionLayout" Height="200">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Title="Item 1" />
<ext:Panel runat="server" Title="Item 2" />
</Items>
</ext:Panel>
</form>
</body>
</html>