[CLOSED] Rendering Issue in MVC

[webppl]

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
            }
        });
    });
});

[Daniil]

Hi,

Is there any error?

Please try to set up

SourceFormatting="false"

for the ResourceManager.

[webppl]

Thanks Daniil, Well i tried adding SourceFormatting="false" but still nothing is coming inside portlet and no error is coming

[Vladimir]

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