PDA

View Full Version : [CLOSED] Dockable Panel?



ptrourke
Apr 03, 2014, 5:43 PM
I was looking through the examples, and didn't find what I was looking for, so I thought I'd ask.

I have a grid which I would like to start off being viewable as a panel with only a few columns showing, but which would expand into a window with many columns showing when the user wanted to edit it. Think of it as a dockable window (or undockable panel).

I can see how I could accomplish this by having 1.) a hideable grid panel in my main window, and 2.) a hideable window with a second grid panel, both using the same store, and show and hide them alternately in response to clicking a tool. I was just wondering if there was an existing component that did it all.

Thanks!

RCN
Apr 03, 2014, 6:31 PM
I think that you can accomplish it by reconfiguring the grid, as shown on the following examples:

http://examples2.ext.net/#/GridPanel/ColumnModel/Change_Models/
http://examples2.ext.net/#/GridPanel/ColumnModel/Reconfigure/
http://examples2.ext.net/#/GridPanel/Data_Presentation/Grid_and_Store_Reconfigure/
http://examples2.ext.net/#/Kitchen_Sink/GridPanels/Reconfigure_GridPanel/

do you really need a second window?

RCN
Apr 03, 2014, 6:33 PM
Please, also take a look on the following example: http://examples2.ext.net/#/GridPanel/Miscellaneous/Details_Window/

Click on the trigger on the last column

ptrourke
Apr 03, 2014, 7:06 PM
Thanks, RCN. That last might be useful as a workaround for what I want; but ideally, if it is possible, I'd love to have a grid that can be shown either as a grid panel in my main view (as the west panel of a dashboard) or as a floating window, modally, in front of my main view, depending on whether the user is just browsing the list or editing it.

RCN
Apr 03, 2014, 7:22 PM
Wait few minutes. i am gonna implement a sample for you

RCN
Apr 03, 2014, 7:37 PM
Let me know whether the following sample helps you.

9331

9341



<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
App._wdn.show();
}
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Development" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel5" runat="server" Title="Center" Region="Center" Border="false"
Html="Ext.Net" />
<ext:GridPanel ID="GridPanel1" Region="East" runat="server" Title="Records" Width="500"
MinWidth="500" MaxWidth="400">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Flat="true">
<Items>
<ext:Button ID="Button1" runat="server" Text="Edit" Icon="Pencil">
<Listeners>
<Click Handler="click()" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store AutoLoad="true" ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" Text="ID" DataIndex="ID" runat="server" />
<ext:Column ID="Column2" Flex="1" Text="Name" DataIndex="Name" runat="server" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
<Bin>
<ext:Window ID="_wdn" Width="500" Height="420" Modal="true" AutoScroll="false" runat="server">
<Items>
<ext:GridPanel ID="GridPanel2" Region="East" runat="server" Title="Records" Layout="FitLayout">
<Store>
<ext:Store AutoLoad="true" ID="Store1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ID="Column3" Text="ID" DataIndex="ID" runat="server" />
<ext:Column ID="Column5" Flex="1" Text="Name" DataIndex="Name" runat="server" />
<ext:Column ID="Column4" Flex="1" Text="Address" DataIndex="Address" runat="server" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Window>
</Bin>
</ext:Viewport>
</body>
</html>




namespace RCNBS.Visions.SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeRecords()
{
List<Entity> lst = new List<Entity>();

for (int index = 0; index < 15; index++)
{
lst.Add(new Entity
{
ID = index,
Name = "Name" + index,
Address = "Address" + index,
});
}

return new StoreResult(lst, lst.Count());
}
}

public class Entity
{
public int ID { get; set; }

public string Name { get; set; }

public string Address { get; set; }
}
}

ptrourke
Apr 04, 2014, 7:49 PM
Thanks, RCN. I'm sorry, it looks like I'm not quite communicating what I have in mind.

What I'm trying to do is similar to the floatable panels in Visual Studio. As an example, the search box can be docked in the right column of the window, or it can float in front of the window.

If you look at these two examples, what I'm trying to do is a combination of these two features: draggable and dropable.

http://examples2.ext.net/#/DragDrop/Panel/Dropable_Panel/

Like the dropable panel, I'd like to be able to move my grid panel out of its starting position, and if I wish, to drop it into another location.

http://examples2.ext.net/#/DragDrop/Panel/Draggable_Panel/

Like the draggable panel, I'd like to be able to move the panel arbitrarily.

If the dropable panel allowed you to leave the panel floating between docking positions, I'd have what I'm looking for.

If there isn't a built-in feature of a component that does this, I'll just write what I need (though I may use some of RCN's ideas).

Daniil
Apr 04, 2014, 8:46 PM
If there isn't a built-in feature of a component that does this, I'll just write what I need (though I may use some of RCN's ideas).

I would say there is no built-in feature for that.

I think there is a way to make a non-floating Component to be floating, but I don't see a way back. It means that you are going to have two instances of the same GridPanel - a floating one and a non-floating one.

ptrourke
Apr 18, 2014, 3:39 PM
Thanks for all this help. I'm back on this part of the application again, and decided (after thinking about RCN's example) to use a details window instead of a second grid.