extjs框架是一个JavaScript框架，可以渲染出丰富的控件

实例：

代码：

<html>

<head>

	<title>test</title>

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

<!--

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

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

-->

<script src="js/ext-base.js" type="text/javascript"></script>

<script src="js/ext-all.js" type="text/javascript"></script>

<!--

<script type ="text/javascript" src="js/ux-all.js"></script>

提示框

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

-->

</head>

<body>

<div style="border:4px dashed #ccc;margin:50px 50px;padding:50px 50px;">

输入框<input id="text" />

<br/>

表格

<div id="grid" style="height:200px;"></div>

<br/>

表单

<div id="form" style="height:120px;"></div>

表单组件

<div id="formGroup" ></div>

</div>

<script type="text/javascript">

  Ext.onReady(function () {

	//提示框

	//Ext.Msg.alert('<span style="color:red;">tip</span>','这个是EXTJS的demo，初始化加载方法都应该<span style="color:red;">写在Ext.onReady里面</span>');

	//事件绑定

	Ext.get('text').on('keypress',enterEvent);

	//表格

	gridControl();

	//表单

	formControl();

	//表单组件

	formGroupControl();

  });

///回车事件

function enterEvent(e){

	if(e.charCode==Ext.EventObject.ENTER){

		console.log(Ext.get('text').dom.value);

		Ext.Msg.alert('info','hello,'+Ext.get('text').dom.value);

	}

}  

//表格控件

function gridControl(){

	//行号

	var rn=new Ext.grid.RowNumberer();

	//列

	var cm=new Ext.grid.ColumnModel([

		rn,

		{header:'编号',dataIndex:'id'},

		{header:'名称',dataIndex:'name',renderer:function(value){

				return '<span style="color:red;" onclick="e_alert(\''+value+'\')">名称是'+value+'</span>';

			}

		},

		{header:'描述',dataIndex:'desc'},

		{header:'备注',dataIndex:'remark'}

	]);

	//数据

	var data=[

		['id','name','desc','remark'],

		['2','name','desc','remark'],

		['3','name','desc','remark'],

		['4','name','desc','remark'],

		['5','name','desc','remark'],

		['7','name','desc','remark'],

		['8','name','desc','remark'],

		['1','2','3','4']

	];

	var store=new Ext.data.Store({

		proxy:new Ext.data.MemoryProxy(data),

		//proxy:new Ext.data.ScriptTagProxy({url:'http://www.family168.com/data.json'}),

		reader:new Ext.data.ArrayReader({},[

			{name:'id',mapping:0},

			{name:'name',mapping:1},

			{name:'desc'},

			{name:'remark'}

		])

	});

	//面板

	var grid=new Ext.grid.GridPanel({

		renderTo:'grid',

		height:200,

		store:store,

		loadMask:true,

		cm:cm,

		viewConfig:{

			forceFit:true

		}

	});

	//加载数据

	store.load();

}

function e_alert(value){

	Ext.Msg.alert('info',value);

}

//表单

function formControl(){

	var form=new Ext.form.FormPanel({

		defaultType:'textfield',

		labelAlign:'right',

		title:'form',

		frame:true,

		labelWidth:50,

		buttonAlign:'center',

		width:220,

		items:[

			{fieldLabel:'文本框'}

		],

		buttons:[

			{text:'按钮'}

		]

	});

	form.render('form');

}

//表单组件

function formGroupControl(){

	Ext.QuickTips.init();

	var formGroup=new Ext.form.FormPanel({

		title:'form',

		frame:true,

		labelWidth:50,

		width:600,

		labelAlign:'right',

		buttonAlign:'center',

		items:[

			{

				layout:'column',

				items:[

					{

						title:'单纯输入',

						xtype:'fieldset',

						checkboxToggle:true,

						autoHeight:true,

						columnWidth:0.7,

						defaults:{width:300},

						items:[

							{

								fieldLabel:'文本',

								xtype:'textfield',

								name:'text'

							},

							{

								fieldLabel:'数字',

								xtype:'numberfield',

								name:'number'

							},

							{

								fieldLabel:'选择',

								xtype:'combo',

								name:'combo',

								store:new Ext.data.SimpleStore({

									fields:['value','text'],

									data:[

										['1','2'],

										['aa','bb'],

										['aa2','bb2'],

										['aa3','bb3'],

										['hello','你好'],

									]

								}),

								valueField:'value',

								displayField:'text',

								mode:'local',

								emptyText:'请选择'

							},

							{

								fieldLabel:'日期',

								xtype:'datefield',

								name:'date'

							},

							{

								fieldLabel:'时间',

								xtype:'timefield',

								name:'time'

							},

							{

								fieldLabel:'多行',

								xtype:'textarea',

								name:'textarea'

							},

						]

					},

					{

						title:'多选',

						xtype:'fieldset',

						checkboxToggle:true,

						hideLabels:true,

						style:'margin-left:10px;',

						columnWidth:0.3,

						defaultType:'checkbox',

						items:[

							{

								boxLabel:'首先要吃饱',

								name:'check',

								value:'1',

								width:'auto'

							},

							{

								boxLabel:'然后也要吃饱',

								name:'check',

								value:'2',

								checked:false,

								width:'auto'

							},

							{

								boxLabel:'接着还是要吃饱',

								name:'check',

								value:'3',

								checked:true,

								width:'auto'

							},

							{

								boxLabel:'最后也要吃饱',

								name:'check',

								value:'4',

								checked:false,

								width:'auto'

							},

						]

					},

					{

						title:'单选',

						xtype:'fieldset',

						checkboxToggle:true,

						defaultType:'radio',

						style:'margin-left:10px;',

						columnWidth:0.3,

						hideLabels:true,

						autoHeight:true,

						items:[

							{

								boxLabel:'渴望自由',

								name:'rad',

								value:'1',

								checked:true,

								width:'auto'

							},

							{

								boxLabel:'祈求爱情',

								name:'rad',

								value:'2',

								width:'auto'

							}

						]

					}

				]

			},

			{

				layout:'form',

				labelAlign:'top',

				items:[

					{

						xtype:'htmleditor',

						fieldLabel:'在线编辑器',

						id:'editor',

						anchor:'98%'

					}

				]

			}

		],

		buttons:[

			{text:'保存'},

			{text:'读取'},

			{text:'取消'},

		]

	});

	formGroup.render('formGroup');

}

</script>

</body>

</html>

　　

EXTJS框架-入门实例的更多相关文章

  1. scrapy爬虫框架入门实例（一）

    流程分析 抓取内容(百度贴吧:网络爬虫吧) 页面: http://tieba.baidu.com/f?kw=%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB&ie=ut ...

  2. CXF框架入门实例

    首先:什么是CXF?为什么要用CXF? CXF 包含了大量的功能特性,但是主要集中在以下几个方面:支持 Web Services 标准:CXF 支持多种 Web Services 标准,包含 SOAP ...

  3. Python之Scrapy爬虫框架 入门实例（一）

    一.开发环境 1.安装 scrapy 2.安装 python2.7 3.安装编辑器 PyCharm 二.创建scrapy项目pachong 1.在命令行输入命令:scrapy startproject ...

  4. SpringMVC 框架系列之初识与入门实例

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...

  5. Python爬虫Scrapy框架入门（0）

    想学习爬虫,又想了解python语言,有个python高手推荐我看看scrapy. scrapy是一个python爬虫框架,据说很灵活,网上介绍该框架的信息很多,此处不再赘述.专心记录我自己遇到的问题 ...

  6. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  7. 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战

    概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...

  8. 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战

    前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...

  9. wxPython中文教程入门实例

    这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下     wxPython中文教程入门实例 wx.Window 是一个基类 ...

随机推荐

  1. 本地安装SQL Server 2017 Express和Microsoft SQL Server Management Studio 18.1

    sqlserver下载链接:https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 这个安装的是免费版的Express,当然也可 ...

  2. Lucid Dream

    Lucid Dream 作者:Lo Stigmergy链接:https://www.zhihu.com/question/21260829/answer/35733194 清醒状态下时意识和潜意识基本 ...

  3. 3_PHP表达式_1_常量

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. PHP常量分为自定义常量与预定义常量. 1.自定义常量 在使用前必须先定义,PHP的define()函数专门用于定 ...

  4. SDL 实现多线程 的一些BUG

    1. SDL_init()  在多个线程初始化的时候  , 在第二个线程出现SDL_init 崩溃的现象  SDL init  错误码:0XFFFFFFFF 2. SDL_init() 如果只初始化一 ...

  5. 一、hystrix如何集成在openfeign中使用

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 HystrixInvocationHandler hystrix是开源的一个熔断组件,s ...

  6. Windows cmd操作文件夹

    ir // 列出目录下所有文件夹 rd dirname // 删除dirname文件夹(空文件夹) rd /s/q dirname // 删除dirname文件夹(非空)

  7. css 设置overflow:scroll 滚动条的样式

    /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1 ...

  8. AetherUpload大文件传输

    AetherUpload-Laravel是laravel框架下的一个大文件传输组件 github:https://github.com/peinhu/AetherUpload-Laravel 文件传输 ...

  9. HIVE常用命令之MSCK REPAIR TABLE

    MSCK REPAIR TABLE命令主要是用来解决通过hdfs dfs -put或者hdfs api写入hive分区表的数据在hive中无法被查询到的问题.我们知道hive有个服务叫metastor ...

  10. jade变量声明和数据传递

    声明一个变量 - var course = 'jade'; 取得一个变量 #{course} 大括号里面写入变量命,前面加个#号就可以取得变量 在括号里面可以进行诸多都运行操作,比如大小写 #{cou ...