zoukankan      html  css  js  c++  java
  • ExtJs5入门_HelloWorld

                ExtJS5是一个JavaScript应用程序框架,它为您提供了一整套工具用于创建跨平台的应用程序。Ext JS 5支持所有现代浏览器,IE8的最新版本以及Chrome和介于两者之间的。Ext JS是面向对象的、基于类库的。

    第一个ExtJs案例:

    HelloWorld:

        ①、下载extjs类库   

        ②、编写html文件   index.html

        ③、编写js代码      app.js

     

    index.html


    <html>
    <head>
    <title>Welcome to Ext JS!</title>
    <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script>
    <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
    </html>


    app.js


    Ext.application({
    name: "ExtJSTest",
    launch: function(){
    Ext.create('Ext.Panel', {
    renderTo : Ext.getBody(),
    width : 200,
    height : 150,
    bodyPadding : 5,
    title : 'Hello World',
    html : 'Hello <b>World</b>...'
    });
    }
    });


    了解ExtJs                                                                                                                                                                                

    我们先来定义一个类

    定义一个panel类如下:


    Ext.define(
    'MyApp.MyPanel',
    {

    extend : 'Ext.Panel',

    title : 'Hello World',

    html : 'Hello <b>World</b>...'

    });


    你可以看到,我们定义了一个东西叫做MyPanel,它继承于ext js panel类 现在我们可以使用这个模板来创建一个新的对象。

    我们需要两个面板,他们之间的唯一区别就是内容不一样,我们就可以创建两个实例,现在你的app.js内容应该像下面这样:


    Ext.define(
    'ExtJSTest.MyPanel',
    {

    extend : 'Ext.Panel',

    title : 'Hello World',

    html : 'Hello <b>World</b>...'

    });

    Ext.application({
    name: "ExtJSTest",
    launch: function(){

    Ext.create('ExtJSTest.MyPanel', {
    renderTo : Ext.getBody(),
    title : 'MyFirst Panel',
    html : 'MyFirst Panel'
    });
    Ext.create('ExtJSTest.MyPanel', {
    renderTo : Ext.getBody(),
    title : 'MySecend Panel',
    html : 'MySecend Panel'
    });
    }
    });


      

  • 相关阅读:
    Python:在一个moudle如何引入另一个moudle下面的包
    RobotFramework做自动化中,能定位到iFrame里面,怎么在iFrame里面输入文字?
    RobotFramework框架做自动化的过程中,遇到不能选择下拉框问题
    雕刻机虚拟仿真及上位机设计(Labview上位机+Proteus仿真)
    医学成像原理——NMR/MRI成像基础
    数字图像处理(二) 灰度变换与空域滤波
    数字图像处理(一) 数字图像基础
    Python爬虫笔记
    python数据分析-第一周
    pyhton-web开发
  • 原文地址:https://www.cnblogs.com/fkeyta/p/9518653.html
Copyright © 2011-2022 走看看