[英]How to make a circle in a customized view class?
I am trying to draw a circle using Sencha's Ext.draw.Component in my customized view class but it is not showing any circle in it. 我试图在我的自定义视图类中使用Sencha的Ext.draw.Component画一个圆,但是它没有显示任何圆。 I have pasted the code for reference. 我已粘贴代码以供参考。
I also tried to define the variable of type component in my Main class but upon doing so the compiler gave an error saying that the type component is unknown. 我还尝试在Main类中定义类型为component的变量,但是这样做之后,编译器给出了一个错误,指出类型为undefined。
// Main Class //主类
Ext.define('GS0.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.Carousel',
'Ext.Container',
'Ext.draw.Component',
'Ext.Img'
],
config: {
tabBarPosition: 'bottom',
items: [
{
iconCls: 'home',
xtype: 'carousel',
ui : 'dark',
direction: 'horizontal',
items: [
{
xtype: 'draw',
type: 'circle',
radius: 50,
x: 100,
y: 100,
fill: '#2d2d2d'
},
{
xtype: 'img',
src: 'images/nm.jpg'
}
]
}
]
}
});
// Circle Class
Ext.define('GS0.view.CC', {
extend: 'Ext.draw.Component',
xtype: 'cc',
config: {
type: 'circle',
cx: 100,
cy: 100,
r: 25,
fillStyle: 'blue'
}
});
Try modifying you items in the GSO.view.Main 尝试在GSO.view.Main中修改您的项目
items: [{
iconCls: 'home',
xtype: 'carousel',
ui : 'dark',
direction: 'horizontal',
items: [{
xtype: 'draw',
items:[{
type: 'circle',
fill: '#79BB3F',
radius: 100,
x: 100,
y: 100
}]
},{
xtype: 'img',
src: 'images/nm.jpg'
}]
}]
The circle code should be added as an item to the xtype=draw block. 圆圈代码应作为一项添加到xtype = draw块中。
I think the way I am loading the Main is a problem. 我认为加载Main的方式存在问题。 here is the code. 这是代码。 Can you spot any error. 您能发现任何错误吗? PS please see line Ext.viewport.add(Ext.create(GS0.view.main)) PS请参阅Ext.viewport.add(Ext.create(GS0.view.main))行
Ext.Loader.setPath({
'Ext': 'touch/src',
'GS0': 'app'
});
//</debug>
Ext.application({
name: 'GS0',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('GS0.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.