[CLOSED] Header of grid added via ExtJS to a markup panel, not showing

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Header of grid added via ExtJS to a markup panel, not showing

    Hi all, I have a problem with grid headers not showing when I add an ExtJS grid to a markup Panel....

    I'm creating dynamically a grid in a JS function and then adding it to the panel from the markup, like shown below:

    //From a part of the JS function ------------------------
    
    //buildGrid creates a Ext.create('Ext.grid.Panel', { ... })            
    content = buildGrid();
    
    var vp = Ext.getCmp("SettingsXPanel");
    
    
    //Deletes previous added items to the panel
    var f;
    while (f = vp.items.first()) {
          vp.remove(f, true);
    }
    
    vp.items.add(content);
    vp.updateLayout(); //Refreshes the layout after the grid is added
    content.getView().refresh(); //Not sure if needed
    The Markup:

    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">            
         <Items>                
              <ext:Button runat="server" ID="RefreshGridBtn" Region="North">                    
                   <Listeners>                        
                        <Click Fn="refreshBtnClicked"></Click>                    
                   </Listeners>                
              </ext:Button>                
              <ext:Container ID="Panel_SettingsXContainer" runat="server" Hidden="false" Split="true" Region="Center" Layout="BorderLayout">                    
                   <Items>                        
                        <ext:Panel runat="server" ID="SettingsXPanel" Region="Center" OverflowY="Auto"></ext:Panel>                    
                   </Items>                
              </ext:Container>            
         </Items>        
    </ext:Viewport>
    However, the grid headers are not shown in the first add, but if I call the function again (after the page has already loaded), the grid will refresh and show all the data/headers correctly...

    This is code from ExtJS 4 and Ext.net 2.5, is that a migration issue?
    I'm using ExtJS 6 and ExtNet 4.1 now...
    Last edited by fabricio.murta; Aug 04, 2016 at 4:52 PM.
  2. #2
    Hello, Peter!

    Please provide a runnable test case so we can try and help you.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Example code

    Hello Fabricio!

    Here is an example of page that does the same thing that I'm trying to do....

    <script type="text/javascript">
        function initialize() {
    
    
            compileGrid();
        }
    
    
        function compileGrid() {
            //buildGrid creates an Ext.grid.Panel
            content = buildGrid();
    
    
            var vp = Ext.getCmp("Panel1");
    
    
            //Removes previously added objects
            var f;
            while (f = vp.items.first()) {
                vp.remove(f, true);
            }
    
    
            //Adds the created grid to the panel
            vp.items.add(content);
            vp.updateLayout(); //updates the panel layout
            content.getView().refresh(); //refreshes the data of the grid
        }
    
    
        function buildGrid() {
            var rows = [];
            for (i = 0; i < 5; i++) {
                var ob = {
                    ID: "Object_" + i,
                }
                rows.push(ob);
            }
            var cols = {
                ID: {
                    dataIndex: 'ID',
                    type: 'string',
                }
            };
            var params = {
                columns: cols,
                id: 'SettingsGrid',
                'data': rows,
                viewconfig: {
                    forceFit: true,
                    stripeRows: true
                }
            };
    
    
            var gri = buildExtGrid(params);
            return gri;
        }
    
    
        function buildExtGrid(params) {
            var fields = [];
            for (var c in params.columns)
                fields.push(createStoreField(params.columns[c]));
    
    
            var store = Ext.create('Ext.data.JsonStore', {
                fields: fields,
                data: params.data
            });
            var cols = [];
    
    
            for (var c in params.columns)
                cols.push(createColumn(params.columns[c]));
    
    
            var grid = Ext.create('Ext.grid.Panel', {
                store: store,
                id: (params.id) ? params.id : null,
                stateful: true,
                stateId: 'stateGrid1',
                columns: cols,
                height: params.height,
                width: params.width,
                title: params.title,
                renderTo: (params.target) ? params.target : null,
                viewConfig: (params.viewconfig) ? params.viewconfig : { stripeRows: true },
    
    
                bbar: (params.pageInfo) ? createPageControl(params.pageInfo) : null
            });
    
    
            return grid;
        }
    
    
        function createStoreField(data) {
            var retOb = {
                name: data.dataIndex,
            };
            if (data.type)
                retOb.type = data.type;
    
    
            return retOb;
        }
    
    
        function createColumn(data) {
            var retOb = {};
            var coltype = null;
    
    
            retOb.xtype = null
            retOb.text = (data.text) ? data.text : data.dataIndex;
            retOb.flex = (data.width) ? 0 : 1;
            retOb.format = (data.format) ? data.format : null;
            retOb.dataIndex = data.dataIndex;
            retOb.hidden = (data.hidden) ? data.hidden : false;
            retOb.flex = true;
    
    
            return retOb;
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>ExtJS grid in Markup Panel - Example</title>
    </head>
    <body onload="initialize();">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Container
                    ID="Container1" runat="server" Split="true" Region="Center" Layout="BorderLayout">
                    <Items>
                        <%--Button to delete and create a new grid--%>
                        <ext:Button runat="server" ID="Button1" Region="North">
                            <Listeners>
                                <Click Fn="compileGrid" />
                            </Listeners>
                        </ext:Button>
                        <%--Panel where the grid is added--%>
                        <ext:Panel runat="server" Title="ExtJs grid in Markup Panel" ID="Panel1" Region="Center" OverflowY="Auto"/>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  4. #4
    Hello!

    I believe there's a simple mistake on the sample you provided. You create a grid with ID SettingsGrid but tries to fetch an non-existing Panel1?
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabricio,

    I don't understand your answer... the Panel1 exists, it is defined in the Markup.....

    Did the sample code work for you or you had any problem?
    If it worked you should have seen that the grid didn't load correctly, but only does when the user clicks on the button (Button1).

    How it comes?
  6. #6
    Alright, that's not always that we can say "intellisense is your friend". It somehow renamed stuff around as I pasted the code. I'll review it and get back to you soon!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello again!

    You are calling initialize() way too early. Wrap the call in an Ext.onready() call and you should be fine. In fact, that's the correct way to handle script calling script to run first thing when the page has been loaded, and can be used in ordinary script tags on page's header. For example, this would work:

    <script>
        Ext.onReady(function () { initialize(); });
    </script>
    And, of course, let the body tag be nothing more than <body>.

    I hope this helps! Sorry for the mistake, your sample code works perfectly!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hi again Fabricio,

    I tried as you suggested, but without success. The initialize() is called by the Ext.onReady(), but the problem persists.
    The grid is not shown correctly...

    Could you post the modified code that worked for you?

    Thanks in advance
  9. #9
    Hello Peter!

    The grid wasn't showing at all to me, so I got content to the point it just shown up. From that point on, it is a matter of content.setHeight(200) for it to take shape. ForceFit is not necessary at all.

    Here's the code:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script type="text/javascript">
        function initialize() {
            compileGrid();
        }
    
        function compileGrid() {
            //buildGrid creates an Ext.grid.Panel
            content = buildGrid();
    
            var vp = Ext.getCmp("Panel1");
    
            //Removes previously added objects
            var f;
            while (f = vp.items.first()) {
                vp.remove(f, true);
            }
    
            //Adds the created grid to the panel
            vp.items.add(content);
            vp.updateLayout(); //updates the panel layout
            content.getView().refresh(); //refreshes the data of the grid
        }
    
        function buildGrid() {
            var rows = [];
            for (i = 0; i < 5; i++) {
                var ob = {
                    ID: "Object_" + i,
                }
                rows.push(ob);
            }
            var cols = {
                ID: {
                    dataIndex: 'ID',
                    type: 'string',
                }
            };
            var params = {
                columns: cols,
                id: 'SettingsGrid',
                'data': rows,
                viewconfig: {
                    forceFit: true,
                    stripeRows: true
                }
            };
    
            var gri = buildExtGrid(params);
            return gri;
        }
    
        function buildExtGrid(params) {
            var fields = [];
            for (var c in params.columns)
                fields.push(createStoreField(params.columns[c]));
    
            var store = Ext.create('Ext.data.JsonStore', {
                fields: fields,
                data: params.data
            });
            var cols = [];
    
            for (var c in params.columns)
                cols.push(createColumn(params.columns[c]));
    
            var grid = Ext.create('Ext.grid.Panel', {
                store: store,
                id: (params.id) ? params.id : null,
                stateful: true,
                stateId: 'stateGrid1',
                columns: cols,
                height: params.height,
                width: params.width,
                title: params.title,
                renderTo: (params.target) ? params.target : null,
                viewConfig: (params.viewconfig) ? params.viewconfig : { stripeRows: true },
    
                bbar: (params.pageInfo) ? createPageControl(params.pageInfo) : null
            });
    
            return grid;
        }
    
    
        function createStoreField(data) {
            var retOb = {
                name: data.dataIndex,
            };
            if (data.type)
                retOb.type = data.type;
    
            return retOb;
        }
    
        function createColumn(data) {
            var retOb = {};
            var coltype = null;
    
            retOb.xtype = null
            retOb.text = (data.text) ? data.text : data.dataIndex;
            retOb.flex = (data.width) ? 0 : 1;
            retOb.format = (data.format) ? data.format : null;
            retOb.dataIndex = data.dataIndex;
            retOb.hidden = (data.hidden) ? data.hidden : false;
            retOb.flex = true;
    
            return retOb;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ExtJS grid in Markup Panel - Example</title>
        <script>
            Ext.onReady(function () { initialize(); });
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Container
                    ID="Container1" runat="server" Split="true" Region="Center" Layout="BorderLayout">
                    <Items>
                        <%--Button to delete and create a new grid--%>
                        <ext:Button runat="server" ID="Button1" Region="North">
                            <Listeners>
                                <Click Fn="compileGrid" />
                            </Listeners>
                        </ext:Button>
                        <%--Panel where the grid is added--%>
                        <ext:Panel runat="server" Title="ExtJs grid in Markup Panel" ID="Panel1" Region="Center" OverflowY="Auto"/>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hello Fabricio,

    your solution works, but it's not what I wanted to achieve.

    Instead, the problem was how I was calling the "add" function:

    I changed this:

    vp.items.add(content);
    To this:

    vp.add(content);
    And now it works fine..

    Thanks for your time and help Fabricio!
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Extending ExtJS class and Ext.Net Markup
    By matt in forum 3.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 09, 2015, 2:51 PM
  2. Replies: 1
    Last Post: May 20, 2014, 6:38 AM
  3. Replies: 5
    Last Post: Oct 02, 2013, 9:57 PM
  4. [CLOSED] Not showing header of a grid
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 26, 2012, 10:56 AM
  5. Problem With Grid Panel in Extjs
    By a_elsayed2010 in forum 1.x Help
    Replies: 2
    Last Post: Sep 29, 2010, 1:48 PM

Posting Permissions