安装 Ext JS 4 - 在哪里放置文件？

发布于 2024-12-06 17:33:13 字数 1304 浏览 1 评论 0原文

科尔多瓦的大家好！我的问题如下...如何配置我的 Ext JS 4 文件以便开始工作？因为虽然我设法显示一个窗口，但当我输入“closeable：true”时，关闭按钮不会出现，或者例如当我输入“frame：true”时，窗口不显示框架，标题栏全部显示白色……所以有点奇怪！我想知道是否有人可以解释我应该将所有 css、js 和 png 或 jpg 文件放置在哪些文件夹中，以便正确渲染小部件，或者也许有人可以在某个地方上传一个包含所有内容的 ext js 4 项目文件就可以了（我更喜欢整个 ext js 库）！... 例如：我的项目结构是：

资源
1. CSS
2. 萨斯
3. 主题
extjs
1. ext-all-debug.js

index.html



<脚本类型=“text/javascript”src=“extjs/ext-all-debug.js”>

<脚本类型=“text/javascript”>

    Ext.BLANK_IMAGE_URL = '资源/主题/图像/默认/树/s.gif';
    Ext.onReady(函数() {
        Ext.BLANK_IMAGE_URL = '资源/主题/图像/默认/树/s.gif';
    var win = Ext.create('Ext.window.Window', {
        渲染到：文档.body，
        标题：'你好'，
        高度：200，
        宽度：400，
        可拖动：真实，
        框架：真实，
        可关闭：true
        }）。展示（）;

    Ext.create('Ext.tab.Panel', {
        宽度：400，
        高度：400，
        渲染到：文档.body，
        项目： [{
            标题：“福”
            }, {
            标题：“酒吧”，
            选项卡配置：{
                title: '自定义标题',
                tooltip: '按钮工具提示'
            }
        }]
     });        
});

如果有人发现不正确的地方，请告诉我...

原文

Hi to all from Córdoba !. My question would be the following one... How to configure my Ext JS 4 files so as to start working ?. Coz although I manage to show a window, the close button when I put: "closable: true" doesn't appear or for instance when I put "frame:true" the window doesn't show a frame and the title bar is all white... So it is a little bit weird !. I would like to know If someone can explain me in which folders I should place all the css, js and png or jpg files in order to have a correct rendering of the widgets or maybe if someone could upload somewhere an ext js 4 project with all the files it would be ok (the entire ext js library I would prefere) !...
For example: My project structure would be:

resources
1. css
2. sass
3. themes
extjs
1. ext-all-debug.js

index.html

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript">

    Ext.BLANK_IMAGE_URL = 'resources/themes/images/default/tree/s.gif';
    Ext.onReady(function() {
        Ext.BLANK_IMAGE_URL =     'resources/themes/images/default/tree/s.gif';
    var win = Ext.create('Ext.window.Window', {
        renderTo: document.body,
        title: 'Hello',
        height: 200,
        width: 400,
        draggable: true,
        frame: true,
        closable: true
        }).show();

    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'Foo'
            }, {
            title: 'Bar',
            tabConfig: {
                title: 'Custom Title',
                tooltip: 'A button tooltip'
            }
        }]
     });        
});
</script>

If someone sees something incorrect, pls tell me...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山川志 2024-12-13 17:33:13

sencha 网站上提供的内容摘要：

您的项目结构应如下所示：

appname
- 应用程序
  - 命名空间
    - Class1.js
    - Class2.js
    - ...
- extjs
- 资源
  - CSS
  - 图片
  - ...
- app.js
- index.html

主要集中在 extjs 文件夹。这应该是您从 sencha 网站收到的文件夹的副本。不要更改里面的文件。

运行 extjs 所需的最小文件数将按以下顺序包含：

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="path/to/your/own/css/if/any">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="your/own/js.js"></script>
</head>
<body></body>
</html>

就是这样！你准备好摇滚了！

您可以使用 ext-all-debug.js 代替 ext-debug.js - 该文件包含整个 Ext JS 库。这有助于缩短您的初始学习曲线，但是在大多数情况下，对于实际应用程序开发来说，ext-debug.js 是首选。

A summary of what is given at the sencha website:

Your project structure should look like this:

appname
- app
  - namespace
    - Class1.js
    - Class2.js
    - ...
- extjs
- resources
  - css
  - images
  - ...
- app.js
- index.html

Mainly concentrate on extjs folder. That should be a copy of the folder that you receive from the sencha website. Don't change the files inside.

The minimum number of files required to run extjs are to be included in the following order:

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="path/to/your/own/css/if/any">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="your/own/js.js"></script>
</head>
<body></body>
</html>

That's it! You're ready to Rock 'n Roll!

Instead of ext-debug.js you can use ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.

回复收藏 0 原文

~没有更多了~