ext的js中怎么显示一句话

在EXT JS中显示一句话的方法包括创建一个简单的面板、使用Ext.Msg显示消息框、以及在页面中添加HTML元素等。其中，创建一个简单的面板是最常用且灵活的一种方法。下面我们详细讨论这些方法。

一、使用Ext.Panel显示一句话

Ext JS提供了丰富的UI组件，其中Ext.Panel是一个非常常用的组件。可以通过创建一个Ext.Panel，并设置其html属性为你想显示的文字，从而在页面上显示一句话。

Ext.onReady(function(){
    Ext.create('Ext.Panel', {
        title: 'Hello Ext',
        width: 300,
        height: 200,
        html: '这是一句简单的话',
        renderTo: Ext.getBody()
    });
});

上述代码在Ext JS初始化完成后，创建了一个面板组件，并将其渲染到页面的body元素中。通过设置html属性为你想显示的文字，可以轻松显示一句话。

二、使用Ext.Msg显示消息框

Ext.Msg是Ext JS提供的一个消息框组件，可以非常方便地显示提示信息，包括简单的一句话。

Ext.onReady(function(){
    Ext.Msg.alert('提示', '这是一句提示信息');
});

上述代码在Ext JS初始化完成后，使用Ext.Msg.alert方法弹出一个消息框，消息框中包含了你想显示的一句话。这种方法非常适合用于显示临时的提示信息。

三、在页面中添加HTML元素

除了使用Ext JS的组件，还可以直接在页面中添加HTML元素，通过JavaScript设置其内容来显示一句话。

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS Example</title>
    <script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/7.4.0/build/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            var messageDiv = document.createElement('div');
            messageDiv.innerHTML = '这是一句HTML中的话';
            document.body.appendChild(messageDiv);
        });
    </script>
</head>
<body>
</body>
</html>

上述代码在页面加载完成后，使用JavaScript创建了一个div元素，并将其内容设置为你想显示的文字，然后将其添加到页面的body元素中。这种方法可以在不使用Ext JS组件的情况下显示文字，适合简单的需求。

四、在Ext JS中使用模板

Ext JS还提供了模板功能，可以通过模板来显示动态生成的内容。

Ext.onReady(function(){
    var tpl = new Ext.XTemplate(
        '<div>这是一句模板生成的话</div>'
    );
    tpl.append(Ext.getBody());
});

上述代码创建了一个Ext.XTemplate实例，并定义了模板内容，然后将模板内容渲染到页面的body元素中。这种方法适合需要动态生成内容的场景。

五、使用Ext.Component的html属性

除了Ext.Panel，其他Ext JS组件也可以通过设置html属性来显示一句话。

Ext.onReady(function(){
    Ext.create('Ext.Component', {
        html: '这是一句通过Ext.Component显示的话',
        renderTo: Ext.getBody()
    });
});

上述代码创建了一个Ext.Component实例，并设置了其html属性为你想显示的文字，然后将其渲染到页面的body元素中。这种方法适用于不需要复杂布局的场景。

六、使用Ext.window.Window显示一句话

如果你需要在一个独立的窗口中显示一句话，可以使用Ext.window.Window组件。

Ext.onReady(function(){
    Ext.create('Ext.window.Window', {
        title: '提示窗口',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {
            xtype: 'panel',
            border: false,
            html: '这是一句在窗口中显示的话'
        }
    }).show();
});

上述代码创建了一个Ext.window.Window实例，并在窗口中嵌入了一个Ext.Panel组件，通过设置html属性显示一句话。这种方法适用于需要弹出独立窗口的场景。

七、使用Ext.form.Label显示一句话

在表单中可以使用Ext.form.Label组件来显示一句话。

Ext.onReady(function(){
    Ext.create('Ext.form.Panel', {
        title: '表单示例',
        width: 300,
        height: 200,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'label',
            text: '这是一句表单中的话'
        }]
    });
});

上述代码创建了一个Ext.form.Panel实例，并在其中添加了一个Ext.form.Label组件，通过设置text属性显示一句话。这种方法适用于在表单中显示提示信息或标签。

八、使用Ext.Toolbar显示一句话

如果你需要在工具栏中显示一句话，可以使用Ext.Toolbar组件。

Ext.onReady(function(){
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: Ext.getBody(),
        width: 500,
        items: [{
            xtype: 'tbtext',
            text: '这是一句工具栏中的话'
        }]
    });
});

上述代码创建了一个Ext.toolbar.Toolbar实例，并在其中添加了一个tbtext组件，通过设置text属性显示一句话。这种方法适用于在工具栏中显示提示信息或标签。

九、使用Ext.Container显示一句话

Ext.Container是Ext JS中一个基础的容器组件，可以通过设置html属性来显示一句话。

Ext.onReady(function(){
    Ext.create('Ext.Container', {
        html: '这是一句通过Ext.Container显示的话',
        renderTo: Ext.getBody()
    });
});

上述代码创建了一个Ext.Container实例，并设置了其html属性为你想显示的文字，然后将其渲染到页面的body元素中。这种方法适用于需要简单容器的场景。

十、总结

在Ext JS中显示一句话的方法有很多，选择哪种方法取决于具体的应用场景。创建一个简单的面板、使用Ext.Msg显示消息框、以及在页面中添加HTML元素是最常用的几种方法。每种方法都有其独特的优势和适用场景，灵活运用这些方法可以满足不同需求。