Ext.ComponentLoader延迟在组件中加载html + js [英] Ext.ComponentLoader lazy loading html+js within component

问题描述

我有四个文件：

layout.html //contains ext resources
layout.js //contains my panel
partial.html //contains <script src="partial.js">
partial.js //contains a component

我的布局中配置了此面板。 js：

I have this panel configured in my layout.js:

var myPanel = Ext.widget('panel',{
    title: 'Load HTML into panel',
    html: 'initial',
    width: 300,
    height: 300,
    loader: {
        url: 'partial.html',
        renderer: 'html',
        scripts: true,
        autoLoad: true
    },
    renderTo: Ext.getBody()
});

我的partial.js中的此代码

And this code in my partial.js

Ext.onReady(function(){

    var myDynPanel = Ext.widget('panel',{
        title: 'Is this working',
        html: 'Dynamic test',
        //renderTo: 'myDynPnl'
    });

});

我想在myPanel 内部显示myDynPanel >。我知道加载器上的 renderer 配置可以设置为组件，但是我正在使用C＃.NET MVC，并且将HTML部分视图的结果。

I want to render myDynPanel inside my myPanel. I am aware that the renderer config on the loader can be set to component, but I'm working with C#.NET MVC and I'm getting partial views results as HTML.

我的解决方案现在是在里面创建一个< div id =myDynPnl>< / div> 并将动态面板渲染到div。但我不想在我的页面中使用id。

My solution now is create a <div id="myDynPnl"></div> inside partial.html and render the dynamic panel to the div. But I don't want to use id in my page.

完成此操作是最好的方式。感谢提前。

What is the best way to accomplish this. Thanks in advance.

使用：
ExtJS 4.1.2

using: ExtJS 4.1.2

推荐答案

一个月后，我们创建了一个解决方案：）。

After a month we created a solution :).

有问题吗？请问！

Ext.define('PartialViewLoader', {
    mixins: {
        observable: 'Ext.util.Observable'
    },
    constructor: function(config) {
        this.mixins.observable.constructor.call(this, config);
        this.addEvents(
            'loaded'
        );
    },
    load: function(config) {
        var component;

        if (this.url == undefined) {
            component = this.loadFunction(config);
            this.fireEvent('loaded', component);
        }
        else {
            Ext.Loader.loadScript({
                url: this.url,
                onLoad: function() {
                    component = this.loadFunction(config);
                    this.fireEvent('loaded', component);
                },
                //onError: function(r) {},
                scope: this
            });
        }
    }
});

Index.js

Index.js

Ext.define('MyView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myview',
});

Index.cshtml

Index.cshtml

@model MyNameSpace.MyModel
Ext.create('PartialViewLoader', {
    url: '~/Scripts/Index.js',
    loadFunction: function(config){
        return Ext.create('MyView', Ext.apply(config, {}));
    }
})

Js文件

Js File

Ext.Ajax.request({
    scope: this,
    method: 'POST',
    url: '~/Views/Index', //controller action that returns a partial view (Index.cshtml)
    //params: {},
    success: function (response) {
        var loader = Ext.decode(response.responseText);

        loader.on('loaded', function (cmp) {
            //this.add(cmp); //Custom logic
        });
        loader.load();
    }
});

这篇关于Ext.ComponentLoader延迟在组件中加载html + js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！