What's New?

[CLOSED] Dockable Panel?

  1. #1
    Apr 03, 2014, 5:43 PM

    [CLOSED] Dockable Panel?

    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!
    Last edited by Daniil; Apr 09, 2014 at 1:43 AM. Reason: [CLOSED]
  2. #2
    Apr 03, 2014, 6:31 PM
    I think that you can accomplish it by reconfiguring the grid, as shown on the following examples:

    https://examples2.ext.net/#/GridPane...Change_Models/
    https://examples2.ext.net/#/GridPane...l/Reconfigure/
    https://examples2.ext.net/#/GridPane...e_Reconfigure/
    https://examples2.ext.net/#/Kitchen_...ure_GridPanel/

    do you really need a second window?
    Last edited by RCN; Apr 03, 2014 at 6:38 PM.
  3. #3
    Apr 03, 2014, 6:33 PM
    Please, also take a look on the following example: https://examples2.ext.net/#/GridPane...etails_Window/

    Click on the trigger on the last column
  4. #4
    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.
  5. #5
    Apr 03, 2014, 7:22 PM
    Wait few minutes. i am gonna implement a sample for you
  6. #6
    Apr 03, 2014, 7:37 PM
    Let me know whether the following sample helps you.

    Attachment 9331

    Attachment 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; }
    }
}
  7. #7
    Apr 04, 2014, 7:49 PM

    Dockable Panel?

    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.

    https://examples2.ext.net/#/DragDrop...ropable_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.

    https://examples2.ext.net/#/DragDrop...aggable_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).
  8. #8
    Apr 04, 2014, 8:46 PM
    Quote Originally Posted by ptrourke View Post
    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.
  9. #9
    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.

Similar Threads

  1. [CLOSED] Need client-side code to delete child items or contents of a panel, but not the panel itself
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 17, 2014, 10:29 AM
  2. [CLOSED] View Panel, Dynamically Loaded Content in Center Panel, need to refresh content in West Panel
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 30, 2013, 2:49 PM
  3. How To Add tab In center Panel When we click tree Node in West Panel in View Port
    By Dinesh.T in forum 1.x Help
    Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  4. [CLOSED] Change parent of item, or dockable panel?
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 26, 2011, 8:51 AM
  5. [CLOSED] How to change the height property of a panel after it is rendered and also wich url was loaded using that panel?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 01, 2010, 6:25 PM

Posting Permissions