第一个extjs示例不起作用

时间:2014-01-17 18:16:24

标签: javascript extjs extjs4 extjs4.2

我想学习extjs所以我是一个新手,很抱歉这里有任何愚蠢的问题..

这是我的index.html页面:

<html>
<head>
<meta charset="UTF-8">
<title>Test Hello</title>
<script type="text/javascript" src="extjs-4.2.1-gpl/ext-all.js"></script>
<script type="text/javascript" src="extjs-4.2.1-gpl/ux/form/LoginForm.js"></script>
<!-- <link href="extjs-4.1.1a/KitchenSink-all.css" rel="stylesheet" type="text/css" /> -->
<link href="extjs-4.2.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center" id= "content"  >
    <script type="text/javascript">
        var loginForm = Ext.create("test.view.form.LoginForm", {
                id : "panellogin", 
                renderTo : 'content'
        });
    </script>
</div>
</body>
</html>

和LoginForm:

Ext.define('test.view.form.LoginForm', {
    extend: 'Ext.form.Panel',
    xtype : "test.view.form.LoginForm",
    title: 'Login',
    frame:true,
    width: 320,
    bodyPadding: 20,
    defaultType: 'textfield',
    defaults: {
        anchor: '100%'
    },
    initComponent: function() {
        var me = this;
        me.items = [me.contentPanel];
        me.contentPanel = Ext.create("Ext.grid.Panel", {
            border: true,
            align :"center",
            layout: {
                type: "hbox",
                align: "center"
            },
            items: [
                    {
                        allowBlank: false,
                        fieldLabel: 'User ID',
                        name: 'user',
                        emptyText: 'user id'
                    },
                    {
                        allowBlank: false,
                        fieldLabel: 'Password',
                        name: 'pass',
                        emptyText: 'password',
                        inputType: 'password'
                    },
                    {
                        xtype:'checkbox',
                        fieldLabel: 'Remember me',
                        name: 'remember'
                    }
                    ]
        });
    }
});

我究竟是什么:

  1. 从sencha网站下载的extjs 4.2.1-gpl(约65 Mo压缩)
  2. 当我发现巨大的尺寸时,我会删除像示例,文档
  3. 这样的内容
  4. 将src移到4.2.1-gpl目录
  5. 中名为ux的目录中
  6. 保留资源,图片和区域设置文件夹。
  7. 我需要建议,这是一个好方法吗?我不能把整个内容都放在300万以上!请保留什么?

    Firebug向我显示此错误:TypeError: c is undefined (in ext-all.js line 21) Google Chrome正在显示:Uncaught TypeError: Cannot read property 'length' of undefined

    亲切的问候,

    你能告诉我们发生了什么吗

2 个答案:

答案 0 :(得分:1)

加载extjs源后执行代码(Ext.onReady ...):

Ext.onReady(function () {
    var loginForm = Ext.create("test.view.form.LoginForm", {
        id : "panellogin", 
        renderTo : 'content'
    });
});

答案 1 :(得分:0)

这不像你应该做的那样。特别是删除东西并将src重命名为ux。此外,test.view.form.LoginForm的类定义应位于app/view/form/LoginForm.js文件中,而不是ux/form

阅读文档如何开始使用,尤其是MVC Application ArchitectureApp Architecture Series