[CLOSED] TBar not renedering

  1. #1

    [CLOSED] TBar not renedering

    Hey All,

    Just a quick question, I'm dynamically creating a grid with a topbar but when I create it, it doesn't render, theres a space where it should be on the grid but no toolbar.

    var testArea = function(){
    
     var tb = new Ext.Toolbar({items : [{text: "helloworld"}]});
    
    var myData = new Ext.data.JsonWriter({"Data" : [{"MasterAccountId" : "6100" , "CreatedDate" : "18\/04\/2012 11:55:20", "UserId" : "181", "Username" : "Peter Gammon", "Note" : "Heloo"},{"MasterAccountId" : "6100" , "CreatedDate" : "18\/12\/2012 11:55:20", "UserId" : "181", "Username" : "Peter Jones", "Note" : "Goodbye"}]}); 
    
    var store = new Ext.data.JsonStore({id : "noteStore", idProperty : "Id",data : myData, root : "Data", fields : [{name : "MasterAccountId"}, {name : "CreatedDate", type : "date", dateformat : "d-m-y H:m:s"}, {name : "UserId"}, {name : "Username"}, {name : "Note"}], data : myData }); 
    
    var panel = new Ext.grid.GridPanel({id : "TestGrid",  store: store,title: "Select Note", columns : [{ dataIndex : "CreatedDate", format : "d-m-y H:m:s", header : "Date Created", xtype : "datecolumn"}, { dataIndex : "Username", header: "Created By" },{ dataIndex : "UserId",hidden : true },{ dataIndex : "Note", header: "Notes", renderer :  "limitValue"}], renderTo : "testJs", viewConfig : { forceFit: true }, height : 500,  bbar: tb }); 
    
    panel.doLayout();
    }
    Heres my code if anyone can see anything please let me know.

    Thanks for looking
    Last edited by Daniil; Apr 24, 2012 at 10:32 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please clarify what is the "testJs"?
    renderTo : "testJs"
    Please try:
    panel.syncSize();
    Maybe, you will need to call this code within a GridPanel ViewReady listener.
  3. #3
    sorry for the confusion TestJS is a container (code below) which I render the GridPanel to, I tried your suggestion but it had the effect of making the panel really small.

                                <ext:Container ID="testJs">
                                
    
                        
                                  
                                </ext:Container>
  4. #4
    Thanks for the details.

    Though, I was unable to reproduce the problem using your code.

    Please provide a full sample to reproduce.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var createGrid = function () {
                var tb = new Ext.Toolbar({
                    items: [{
                        text: "helloworld"
                    }]
                });
    
                var myData = new Ext.data.JsonWriter({
                    "Data": [{
                        "MasterAccountId": "6100",
                        "CreatedDate": "18\/04\/2012 11:55:20",
                        "UserId": "181",
                        "Username": "Peter Gammon",
                        "Note": "Heloo"
                    }, {
                        "MasterAccountId": "6100",
                        "CreatedDate": "18\/12\/2012 11:55:20",
                        "UserId": "181",
                        "Username": "Peter Jones",
                        "Note": "Goodbye"
                    }]
                });
    
                var store = new Ext.data.JsonStore({
                    id: "noteStore",
                    idProperty: "Id",
                    data: myData,
                    root: "Data",
                    fields: [{
                        name: "MasterAccountId"
                    }, {
                        name: "CreatedDate",
                        type: "date",
                        dateformat: "d-m-y H:m:s"
                    }, {
                        name: "UserId"
                    }, {
                        name: "Username"
                    }, {
                        name: "Note"
                    }],
                    data: myData
                });
    
                var panel = new Ext.grid.GridPanel({
                    id: "TestGrid",
                    store: store,
                    title: "Select Note",
                    columns: [{
                        dataIndex: "CreatedDate",
                        format: "d-m-y H:m:s",
                        header: "Date Created",
                        xtype: "datecolumn"
                    }, {
                        dataIndex: "Username",
                        header: "Created By"
                    }, {
                        dataIndex: "UserId",
                        hidden: true
                    }, {
                        dataIndex: "Note",
                        header: "Notes",
                        renderer: "limitValue"
                    }],
                    renderTo: "Container1",
                    viewConfig: {
                        forceFit: true
                    },
                    height: 500,
                    bbar: tb
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button runat="server" Text="Create grid">
                <Listeners>
                    <Click Fn="createGrid" />
                </Listeners>
            </ext:Button>
            <ext:Container ID="Container1" runat="server" />
        </form>
    </body>
    </html>
  5. #5
    Thanks Daniil for the help thats the problem solved you can mark this post as closed

Tags for this Thread

Posting Permissions