extjs只有js怎么显示页面

在ExtJS中，只使用JavaScript如何显示页面

在ExtJS中，只使用JavaScript显示页面的方法包括创建ExtJS应用的基础结构、定义和实例化ExtJS组件、使用布局和容器来组织页面元素、动态加载和更新数据。其中，定义和实例化ExtJS组件是关键步骤。通过实例化不同的ExtJS组件，可以在页面上呈现各种UI元素，如表格、表单、按钮等，实现丰富的用户界面。

一、创建ExtJS应用的基础结构

1. 引入ExtJS库

要使用ExtJS，首先需要在HTML文件中引入ExtJS库。可以通过在HTML文件的<head>部分添加以下代码来完成：

<!DOCTYPE html>
<html>
<head>
    <title>ExtJS Application</title>
    <link rel="stylesheet" type="text/css" href="path/to/extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/extjs/ext-all.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="path/to/your/app.js"></script>
</body>
</html>

2. 初始化ExtJS应用

在引入ExtJS库后，我们需要初始化ExtJS应用。这可以通过在JavaScript文件中添加以下代码来实现：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                xtype: 'panel',
                title: 'Hello ExtJS',
                html: '<h1>Welcome to ExtJS</h1>'
            }
        ]
    });
});

上述代码将在页面加载完成后创建一个ExtJS视口，并在其中添加一个面板组件。

二、定义和实例化ExtJS组件

1. 定义组件

在ExtJS中，组件是构建用户界面的基本单元。要定义一个组件，可以使用Ext.define方法。例如，定义一个简单的按钮组件：

Ext.define('MyApp.view.MyButton', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',
    text: 'Click Me',
    handler: function() {
        alert('Button clicked!');
    }
});

2. 实例化组件

定义组件后，可以通过Ext.create方法实例化并将其添加到页面中。例如，将上述按钮组件添加到视口中：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                xtype: 'panel',
                title: 'Hello ExtJS',
                items: [
                    {
                        xtype: 'mybutton'
                    }
                ]
            }
        ]
    });
});

这样，页面上将显示一个包含按钮的面板。

三、使用布局和容器来组织页面元素

1. 布局管理

ExtJS提供了多种布局管理器，用于组织页面上的组件。例如，使用border布局可以将页面划分为多个区域：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            {
                region: 'north',
                xtype: 'panel',
                title: 'North Region',
                height: 100,
                html: 'This is the north region'
            },
            {
                region: 'center',
                xtype: 'panel',
                title: 'Center Region',
                html: 'This is the center region'
            }
        ]
    });
});

2. 容器组件

容器组件是包含其他组件的组件，例如Panel、Window、TabPanel等。通过使用容器组件，可以轻松地组织和管理页面上的多个组件。

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                xtype: 'tabpanel',
                items: [
                    {
                        title: 'Tab 1',
                        html: 'Content of Tab 1'
                    },
                    {
                        title: 'Tab 2',
                        html: 'Content of Tab 2'
                    }
                ]
            }
        ]
    });
});

上述代码将在页面上创建一个包含两个选项卡的TabPanel。

四、动态加载和更新数据

1. 加载数据

ExtJS支持通过Ajax请求从服务器加载数据，并将其显示在组件中。例如，使用Ext.data.Store和Ext.grid.Panel来显示表格数据：

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        proxy: {
            type: 'ajax',
            url: 'path/to/data.json',
            reader: {
                type: 'json',
                rootProperty: 'users'
            }
        },
        autoLoad: true
    });
    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            { text: 'Name', dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email' }
        ],
        height: 200,
        width: 400,
        title: 'User Data'
    });
});

2. 更新数据

要动态更新组件中的数据，可以使用组件的setData或update方法。例如，更新Panel组件中的HTML内容：

Ext.onReady(function() {
    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Dynamic Content',
        html: 'Original content'
    });
    // Update the content after 2 seconds
    Ext.defer(function() {
        panel.update('Updated content');
    }, 2000);
});

通过以上步骤，您可以在ExtJS中只使用JavaScript构建和显示页面，并实现动态数据加载和更新。定义和实例化ExtJS组件是关键步骤，能够灵活地创建和管理各种UI元素，为用户提供丰富的交互体验。

五、事件处理和交互

1. 事件监听

ExtJS提供了丰富的事件机制，可以通过监听组件事件来实现交互。例如，监听按钮的点击事件：

Ext.onReady(function() {
    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Click Me',
        listeners: {
            click: function() {
                alert('Button clicked!');
            }
        }
    });
});

2. 表单交互

表单是Web应用中常见的交互元素。可以使用Ext.form.Panel创建表单，并处理表单提交事件：

Ext.onReady(function() {
    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'User Form',
        width: 300,
        bodyPadding: 10,
        items: [
            {
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name'
            },
            {
                xtype: 'textfield',
                name: 'email',
                fieldLabel: 'Email'
            }
        ],
        buttons: [
            {
                text: 'Submit',
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: 'path/to/submit',
                            success: function(form, action) {
                                Ext.Msg.alert('Success', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failed', action.result.msg);
                            }
                        });
                    }
                }
            }
        ]
    });
});

通过监听表单的提交事件，可以处理用户输入的数据并与服务器进行交互。

六、使用自定义CSS样式

虽然ExtJS提供了丰富的内置样式，但在实际开发中，通常需要自定义CSS样式以满足特定的设计要求。可以通过在HTML文件中引入自定义CSS文件，并在ExtJS组件中应用这些样式：

<!DOCTYPE html>
<html>
<head>
    <title>ExtJS Application with Custom Styles</title>
    <link rel="stylesheet" type="text/css" href="path/to/extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
    <script type="text/javascript" src="path/to/extjs/ext-all.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="path/to/your/app.js"></script>
</body>
</html>

在自定义CSS文件中定义样式：

.custom-panel {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

在ExtJS组件中应用自定义样式：

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Custom Styled Panel',
        cls: 'custom-panel',
        html: 'This panel has a custom background color and border.'
    });
});

通过这种方式，可以灵活地定制ExtJS组件的外观，以符合项目的设计规范。

七、性能优化和最佳实践

1. 减少DOM操作

在ExtJS应用中，频繁的DOM操作会影响性能。应尽量减少直接操作DOM，而是通过ExtJS提供的API进行操作。例如，使用update方法更新组件内容，而不是直接操作DOM元素。

2. 使用`Ext.ComponentQuery`

Ext.ComponentQuery是ExtJS提供的一种强大的查询机制，可以方便地查找和操作组件。通过使用Ext.ComponentQuery，可以避免在代码中硬编码组件ID，从而提高代码的可维护性：

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Parent Panel',
        items: [
            {
                xtype: 'panel',
                itemId: 'childPanel',
                title: 'Child Panel',
                html: 'This is a child panel'
            }
        ]
    });
    // Find the child panel using ComponentQuery
    var childPanel = Ext.ComponentQuery.query('#childPanel')[0];
    childPanel.update('Updated content');
});

3. 使用延迟加载

在大型应用中，延迟加载模块和组件可以显著提高初始加载速度。可以使用Ext.Loader进行模块加载：

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'MyApp': 'path/to/myapp'
    }
});
Ext.onReady(function() {
    Ext.Loader.require('MyApp.view.MyPanel', function() {
        Ext.create('MyApp.view.MyPanel', {
            renderTo: Ext.getBody()
        });
    });
});

通过以上方法，可以在ExtJS中只使用JavaScript显示页面，并实现各种复杂的交互和功能。定义和实例化ExtJS组件是关键步骤，而性能优化和最佳实践则有助于构建高效、可维护的ExtJS应用。