Forms extjs创建生成面板窗体的类

大家好，我是extjs的新手，也是javascript的新手。我正在努力。我想做的是让一个类具有一个方法，该方法生成一个具有各种属性的面板窗体，我希望能够在调用myclass.makepanel时生成克隆面板窗体。我为什么要这么做？我只是在学习不同的东西并熟悉extjs，到目前为止，我并没有尝试完成任何具体的工作，这是我的代码

Ext.define('ryan', {

    constructor: function () {

        Ext.create('Ext.form.Panel', {
            bodyStyle: {
                "background-color": "green"
            },
            name: 'mypanel',
            title: 'Animal sanctuary, one animal per location  ',
            width: 300,
            bodyPadding: 10,
            test: 'mycat',
            style: 'background-color: #Fdd;',
            renderTo: Ext.getBody(),

            items: [{
                id: 'button1',
                xtype: 'button',
                text: 'click the button',
                handler: function () {
                    alert('(<^_^>)')
                }
            }, {
                id: 'wildAnimal',
                xtype: 'textfield',
                fieldLabel: 'animal:',
                name: 'myanimal'
            }, { //end text field
                id: 'myCombo',
                xtype: 'combo',
                fieldLabel: 'choose your animal',
                store: animals,
                queryMode: 'local',
                displayField: 'name',
                listeners: {
                    'change': function (field, selectedValue) {
                        Ext.getCmp('wildAnimal').setValue(selectedValue);
                    }
                }
            } // end combo

                   ], //end items



        }); // end .create
    } // end ffunc
}); //end ryan

var animals = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
        "id": 'mycat',
        "name": "mycat"
    }, {
        'id': 'mydog',
        "name": "mydog"
    }, {
        'id': 'sbBarGirls',
        "name": "BarGirls-when-drunk"
    }]
}); //end animals.create  // up to here no problems

Ext.onReady(ryan.constructor()); // can't actually display the panel.

Ext.define（'ryan'{
构造函数：函数（）{
Ext.create（'Ext.form.Panel'{
车身风格：{
“背景色”：“绿色”
},
名称：“mypanel”，
标题：“动物保护区，每个地点一只动物”，
宽度：300，
车身衬垫：10，
测试：“mycat”，
样式：“背景色：#Fdd；”，
renderTo:Ext.getBody（），
项目：[{
id:'按钮1'，
xtype:'按钮'，
文本：“单击按钮”，
处理程序：函数（）{
警报（“（）”）
}
}, {
id:‘野生动物’，
xtype:'textfield'，
字段标签：“动物：”，
名字：“我的动物”
}，{//结束文本字段
id:“myCombo”，
xtype:'组合'，
fieldLabel:“选择您的动物”，
商店：动物，
queryMode:'本地'，
displayField:'名称'，
听众：{
“更改”：函数（字段，selectedValue）{
Ext.getCmp（“野生动物”）.setValue（selectedValue）；
}
}
}//结束组合
]，//最终项目
})；//结束。创建
}//结束ffunc
}); //结束瑞安
var=Ext.create（'Ext.data.Store'{
字段：['id'，'name']，
数据：[{
“id”：“mycat”，
“名称”：“mycat”
}, {
'id'：'mydog'，
“名称”：“我的狗”
}, {
'id'：'sbBarGirls'，
“名称”：“酒醉时的讨价还价”
}]
}); //结束动物。创建//到此为止没有问题
Ext.onReady（ryan.constructor（））；//无法实际显示面板。

---

很抱歉，该格式无法直接从我的文本编辑器复制。因此，如果我的代码很难阅读，我可以再次发布。我可以将所有内容都放在.onReady中，而不是试图定义“ryan”，但我不想这样做，因为我希望能够通过调用类随时生成克隆表单

您正在定义一个类，但从不从中创建对象：

Ext.onReady(function(){
    var a = new ryan();
});

您不必显式地调用构造函数方法

或者：

---

这个类没有意义，它应该扩展

Ext.form.Panel

并在

initComponent

中配置它，当我这样做并创建多个对象时，变量a和变量b。。。表格出来的时候真的搞砸了。。。是否需要在页面上为每个表单指定位置？这是因为我在侦听器中使用ext.getcmp吗？您不能使用id-对象的id应该是明确的。这意味着您必须从表单面板项中删除id属性。改用

itemId

。例如：

itemId:'wildAnymal'

然后您可以使用以下命令调用它：

this.up（'form'）.down（'wildAnimal'）.setValue（selectedValue）在你的Listener中，我还发现你使用了queryById而不是.down，并且可以去掉hash标签。谢谢你的帮助：D
Ext.onReady(function(){
    var a = Ext.create('ryan');
});