Installing Ext JS 4 - Where to put files?_问答_开发者

Installing Ext JS 4 - Where to put files?

开发者 https://www.devze.com 2023-04-08 03:31 出处：网络

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 wid开发者_开发百科gets 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...

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.