我有四个文件:
layout.html //contains ext resources
layout.js //contains my panel
partial.html //contains <script src="partial.js">
partial.js //contains a component
我在布局中配置了此面板.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()
});
而这段代码在我的部分.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 形式获得部分视图结果。
我现在的解决方案是在 partial 内创建一个<div id="myDynPnl"></div>
.html并将动态面板呈现为div。但我不想在我的页面中使用 id。
实现这一目标的最佳方法是什么。提前谢谢。
用:扩展 4.1.2
一个月后,我们创建了一个解决方案:)。
有问题吗?问吧!
部分视图加载器.js
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
});
}
}
});
索引.js
Ext.define('MyView', {
extend: 'Ext.panel.Panel',
alias: 'widget.myview',
});
Index.cshtml
@model MyNameSpace.MyModel
Ext.create('PartialViewLoader', {
url: '~/Scripts/Index.js',
loadFunction: function(config){
return Ext.create('MyView', Ext.apply(config, {}));
}
})
Js 文件
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();
}
});