[CLOSED] Rendering Issue in MVC

  1. #1

    [CLOSED] Rendering Issue in MVC

    Hi Am dynamically building control and adding in view. Everything works fine but HighCharts inside "PC1" doesn't render below is the code.

    Ext.net.ResourceMgr.load([{
        url: "/ux/extensions/portal/portal-js/ext.axd?v=16881"
    }, {
        url: "/extnet/extnet-data-js/ext.axd?v=16881"
    }, {
        mode: "css",
        url: "/ux/extensions/portal/css/portal-embedded-css/ext.axd?v=16881"
    }], function () {
        Ext.net.ResourceMgr.destroyCmp("idba87ee5e6ddd4957a77ffb5dff3e516a");
        new Ext.ux.Portal({
            id: "idba87ee5e6ddd4957a77ffb5dff3e516a",
            xtype: "portal",
            items: [{
                id: "PC0",
                xtype: "portalcolumn",
                columnWidth: 0.5,
                items: [{
                    id: "Portlet1",
                    xtype: "portlet",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.id58c23fb09cd94b4c8ba14137a0a3f795 = new MaximizeTool({}),
                    height: 400,
                    items: {
                        store: this.st1 = new Ext.ux.data.PagingStore({
                            proxyId: "st1",
                            autoLoad: true,
                            reader: new Ext.data.JsonReader({
                                fields: [{
                                    name: "accno"
                                }, {
                                    name: "name"
                                }, {
                                    name: "branch"
                                }]
                            }),
                            directEventConfig: {},
                            proxy: new Ext.data.PagingMemoryProxy([{
                                "accno": "26",
                                "name": "Peter",
                                "branch": "Melbourne"
                            }, {
                                "accno": "18",
                                "name": "John",
                                "branch": "Brisbane"
                            }], false)
                        }),
                        id: "GvTransactions",
                        xtype: "netgrid",
                        autoScroll: true,
                        height: 200,
                        monitorResize: true,
                        layout: "fit",
                        stripeRows: true,
                        trackMouseOver: true,
                        selectionMemory: false,
                        cm: this.id091fcdba3d4b487c93f145b39c81cd07 = new Ext.grid.ColumnModel({
                            proxyId: "",
                            columns: [{
                                dataIndex: "accno",
                                header: "accno",
                                id: "accno"
                            }, {
                                dataIndex: "name",
                                header: "name",
                                id: "name"
                            }, {
                                dataIndex: "branch",
                                header: "branch",
                                id: "branch"
                            }]
                        })
                    },
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 1",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet1.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet1.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }, {
                    id: "Portlet3",
                    xtype: "portlet",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.id5109807e89e3461fab22c7c472cc181d = new MaximizeTool({}),
                    height: 400,
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 3",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet3.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet3.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }, {
                    id: "Portlet5",
                    xtype: "portlet",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.id6a1e903c5d61495abcecd223ae776d0e = new MaximizeTool({}),
                    height: 400,
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 5",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet5.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet5.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }],
                layout: "auto"
            }, {
                id: "PC1",
                xtype: "portalcolumn",
                columnWidth: 0.5,
                items: [{
                    id: "Portlet2",
                    xtype: "portlet",
                    html: "<div id='chart_container'></div>\r\n<script type='text/javascript'>\r\nvar chart;\r\n$(document).ready(function() {\r\n\tchart = new Highcharts.Chart({\r\n\t\tchart: { renderTo:'chart_container', defaultSeriesType: 'line' }, \r\n\t\tplotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, \r\n\t\tsubtitle: { text: 'Source: WorldClimate.com' }, \r\n\t\ttitle: { text: 'Monthly Average Temperature' }, \r\n\t\ttooltip: { enabled: true, formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'C'; } }, \r\n\t\txAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, \r\n\t\tyAxis: { title: { text: 'Temperature (C)' } }, \r\n\t\tseries: [{ data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], name: 'Tokyo' }]\r\n\t});\r\n});\r\n</script>\r\n",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.idebe4492ace134ca6bbf3b074217ab4fd = new MaximizeTool({}),
                    height: 400,
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 2",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet2.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet2.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }, {
                    id: "Portlet4",
                    xtype: "portlet",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.id5cede5cc79af453e933a6e73a6900ade = new MaximizeTool({}),
                    height: 400,
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 4",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet4.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet4.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }, {
                    id: "Portlet6",
                    xtype: "portlet",
                    defaultAnchor: "-20",
                    cls: "x-column-padding",
                    style: "position:relative;",
                    plugins: this.ida4d05c35260843b0a192b5668a799d58 = new MaximizeTool({}),
                    height: 400,
                    layout: "anchor",
                    closable: true,
                    frame: true,
                    title: "Portlet - 6",
                    tools: [{
                        id: "gear",
                        handler: function (event, toolEl, panel) {
                            Portlet6.hide();
                        },
                        qtip: "Edit Gadget"
                    }, {
                        id: "close",
                        handler: function (event, toolEl, panel) {
                            Portlet6.hide();
                        },
                        qtip: "Close Gadget"
                    }]
                }],
                layout: "auto"
            }],
            layoutConfig: {
                fitHeight: false
            },
            layout: "netcolumn",
            border: false,
            listeners: {
                beforedragover: {
                    fn: function (e) {
                        Ext.Msg.alert('BeforeDrop', String.format('Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}', e.panel.id, e.columnIndex, e.position));
                    }
                },
                drop: {
                    fn: function (e) {
                        Ext.Msg.alert('Drop', String.format('Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}', e.panel.id, e.columnIndex, e.position));
                    }
                }
            }
        });
        PnlDashBoard.addAndDoLayout(idba87ee5e6ddd4957a77ffb5dff3e516a);
        Portlet1.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
        st1.callbackRefreshHandler(response, {
            serviceResponse: {
                success: true,
                data: {
                    data: [{
                        "accno": "26",
                        "name": "Peter",
                        "branch": "Melbourne"
                    }, {
                        "accno": "18",
                        "name": "John",
                        "branch": "Brisbane"
                    }],
                    total: 0
                }
            }
        }, st1, o.eventType, o.action, o.extraParams);
        Portlet2.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
        Portlet3.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
        Portlet4.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
        Portlet5.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
        Portlet6.on("beforehide", function (e) {
            Ext.net.DirectEvent.request({
                url: '/Data/TestUI',
                method: 'POST',
                cleanRequest: true,
                extraParams: {
                    Id: this.id
                }
            });
        });
    });
    Last edited by Daniil; Mar 26, 2012 at 9:48 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Is there any error?

    Please try to set up
    SourceFormatting="false"
    for the ResourceManager.
  3. #3
    Thanks Daniil, Well i tried adding SourceFormatting="false" but still nothing is coming inside portlet and no error is coming
  4. #4
    Please note that you cannot use javascript in Html property because browsers doesn't parse javascript from dynamic html (try to add alert instruction to ensure it)
    Use Content of Portlet instead Html

Similar Threads

  1. [CLOSED] IE 6 Rendering Issue
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jun 14, 2011, 12:08 PM
  2. [CLOSED] Control Rendering issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 05, 2011, 5:26 PM
  3. [CLOSED] Rendering issue after upate
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 13, 2010, 5:07 AM
  4. Rendering issue with HeaderRows
    By asztern in forum 1.x Help
    Replies: 0
    Last Post: Jan 30, 2010, 10:33 AM
  5. [CLOSED] [0.8.2] IE7 Rendering Issue
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 27, 2010, 6:42 AM

Tags for this Thread

Posting Permissions