Ext.js 容器內(nèi)的組件

2022-05-19 11:31 更新

描述

容器中的組件:我們可以在容器內(nèi)部有多個組件。

語法

這里是使用容器內(nèi)部組件的簡單語法。
   var component1 = Ext.create('Ext.Component', {
      html:'First Component'
   });
   Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [component1]
   });
您可以將組件作為容器中的項目

以下是顯示容器內(nèi)部組件的簡單示例
<!DOCTYPE html>
<html>
  <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function () {
        var component1 = Ext.create("Ext.Component", {
          html: "First Component",
        });

        var component2 = Ext.create("Ext.Component", {
          html: "Second Component",
        });

        var component3 = Ext.create("Ext.Component", {
          html: "Third Component",
        });

        Ext.create("Ext.container.Container", {
          renderTo: Ext.getBody(),
          title: "Container",
          border: 1,
          width: "50%",
          style: { borderStyle: "solid", borderWidth: "2px" },
          items: [component1, component2, component3],
        });
      });
    </script>
  </head>
  <body></body>
</html>

這將產(chǎn)生以下結(jié)果:

Ext.js 容器內(nèi)的組件




以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號