How to use generated json to build an extjs window?
-
11-04-2021 - |
문제
I use ExtDesigner designed a window, and the generated json is like:
{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '名称'
},
{
xtype: 'radiogroup',
anchor: '100%',
fieldLabel: '广告类型',
items: [
{
xtype: 'radio',
boxLabel: '文字'
},
{
xtype: 'radio',
boxLabel: '图片'
}
]
}
]
}
]
}
I copied it but I don't know how to use it. I don't find a method to convert it to an extjs component. How to do it?
PS: I use extjs 2.2
해결책
There are two ways to create an ExtJS component.
create the component explicitly, for example:
new Ext.Window({...});
. This way you get the component right away, meaning the event listeners, the extra methods...etc.the second way is lazy loading, which is by specifying the
xtype
of a component in a plain javascript object. This is exactly what you have.
To make the second way work, you need to include your xtype-javascript-object in an ExtJs container, and the container will know how to render it at the appropriate time.
for example :
Ext.onReady(function(){
new Ext.Viewport({
layout : 'fit',
items : [{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [...]
}]
});
});
다른 팁
Think you are looking for something like this. This will show your window in a pop up.
var win = new Ext.Window({
width:400
,id:'autoload-win'
,height:300
,autoScroll:true
});
win.show();