extjs 5.1 免费版支持html5吗

extjs 5.1 免费版支持html5吗,第1张

支持的。

新建两个文件,分别命名为mydemo.html, mydemo.js以后,将对应的HTML源代码

与JavaScript代码copy到各自的文件中,在同一目录下使用Google Chrome浏览器

或者IE9.0打开html文件即可看到效果!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">

    <title>Example</title>

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <script type="text/javascript" src="../../bootstrap.js"></script>

    <script language="javascript" src="mydemo.js"></script>

</head>

<body>

    <h1>ExtJS with HTML5 Demo</h1> 

    <p>The js is not minified so it is readable. See <a href="mydemo.js">source code</a>.</p> 

<div id="my-demo"></div>

</body>

</html>

ExtJS的代码如下:

/**

 * HTML5 Canvas Demo

 */

// create namespace

Ext.namespace('Test')

 

// create application

Test.app = function() {

  return {

    // public methods

    init: function() {

      

    

    var grid = new Ext.Panel({

      renderTo: 'my-demo',

      title:'Simple HTML5 Canvas Demo',

      bodyStyle: 'padding: 10px',

      borders: true,

      plain: true,

      xtype: 'panel',

      width:400,

  height:400,

  html: '<canvas id="canvas" width="400" height="400"></canvas>'

    })

  

    }, // end of init

    

  onDraw: function() {

       this.canvas = document.getElementById('canvas')

        this.ctx = this.canvas.getContext("2d")

// create a blank image data

var canvas2Data = this.ctx.createImageData(this.canvas.width, this.canvas.height)

for ( var x = 0 x < canvas2Data.width x++) {

for ( var y = 0 y < canvas2Data.height y++) {

 

// Index of the pixel in the array

var idx = (x + y * canvas2Data.width) * 4

// assign gray scale value

var distance = Math.sqrt((x - canvas2Data.width / 2) * (x - canvas2Data.width / 2) + (y - canvas2Data.height / 2) * (y - canvas2Data.height / 2))

var cvalue = (128.0 + (128.0 * Math.sin(distance / 8.0)))

canvas2Data.data[idx + 0] = cvalue // Red channel

canvas2Data.data[idx + 1] = cvalue // Green channel

canvas2Data.data[idx + 2] = cvalue // Blue channel

canvas2Data.data[idx + 3] = 255 // Alpha channel

}

}

this.ctx.putImageData(canvas2Data, 0, 0) // at coords 0,0

        // draw author infomation

this.ctx.fillStyle = "red"

this.ctx.font = "24px Times New Roman"

this.ctx.fillText("HTML5 Demo - by gloomyfish ", 50, 60)  

 

  }

  }

}() 

// end of app

Ext.onReady(function(){

Test.app.init()

Test.app.onDraw()

    // alert('ext.onready')

})

// Ext.onReady(Test.app.init, Test.app)

表单是用来获取用户输入的一些数据,最常见的就是注册,登录之类的;

html5表单数据获得方法:

1、首先,打开IDEA软件,并新建一个工程,建好后,右键创建一个html5文件,完成后便完成了最开始的工作;

2、接着先熟悉一些较常用的表单标签:表单<form>,  输入域<input>,文本域<textarea>,按钮<button>,域的标题<legend>,控制标签<label>等。

3、创建一个form,如图,输入一些要创建的东西(我演示的仅为用户密码);

4、打开网页看效果图,便是这样的效果了,拥有了最简单的帐号密码;

5、同时,还可以添加一些选择的元素,如你喜欢什么游戏;就可获得表单数据了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7262658.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存