EXTJS框架-入门实例
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框架-入门实例的更多相关文章
- scrapy爬虫框架入门实例（一）
流程分析 抓取内容(百度贴吧:网络爬虫吧) 页面: http://tieba.baidu.com/f?kw=%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB&ie=ut ...
- CXF框架入门实例
首先:什么是CXF?为什么要用CXF? CXF 包含了大量的功能特性,但是主要集中在以下几个方面:支持 Web Services 标准:CXF 支持多种 Web Services 标准,包含 SOAP ...
- Python之Scrapy爬虫框架 入门实例（一）
一.开发环境 1.安装 scrapy 2.安装 python2.7 3.安装编辑器 PyCharm 二.创建scrapy项目pachong 1.在命令行输入命令:scrapy startproject ...
- SpringMVC 框架系列之初识与入门实例
微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...
- Python爬虫Scrapy框架入门（0）
想学习爬虫,又想了解python语言,有个python高手推荐我看看scrapy. scrapy是一个python爬虫框架,据说很灵活,网上介绍该框架的信息很多,此处不再赘述.专心记录我自己遇到的问题 ...
- Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
- 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战
概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...
- 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战
前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
随机推荐
- putty使用方法
putty是一种体体积小,无需安装的一款免费安全使用方便的绿色软件,它主要用于远程控制linux系统,只要获取了远程的linux的地址,便可以远程控制linux系统以方便管理,越来越受到各方面的欢迎. ...
- uni-app 入门之 nvue (weex) 爬坑记
前言 uni-app 是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS).H5.小程序(微信小程序/支付宝小程序/百度小程序/ ...
- HANA数据库无法停止
Symptom: 使用命令HDB stop多次,每次报错为timeout ----------------------- sdpadm@PRDDB01:/usr/sap/SDP/HDB66/prder ...
- ble编程－外设发送数据到中心
一.外设 1.在外设的.h文件中定义如下 1 //周边管理者 2 3 @property (nonatomic , strong) CBPeripheralManager *peripheralM ...
- ArduPilot简介
源码地址:https://github.com/ArduPilot/ardupilot/ 参考:http://ardupilot.org/dev/docs/learning-the-ardupilot ...
- ScrollView小记
常用代理方法: - (void)scrollViewDidScroll:(UIScrollView *)scrollView 只有 [self.scrolView setContentOffset: ...
- 多个ip地址匹配正则表达式
匹配规则:多个ip地址使用,号进行分割 例如:1.1.1.1,2.2.2.2var iplist =/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}( ...
- 【转】Python之可变参数，*参数，**参数，以及传入*参数，进行解包
https://blog.csdn.net/cadi2011/article/details/84871401 1.定义了一个需要两个参数的函数 def print_str(first, second ...
- java基础（1）----简介
基础语法. 面向对象. 字符串和集合. IO流. 接口. lambda. 方法引用. Stream. 模块化. 一.java的前世今生: J2SE:标准体验版.J2EE:企业版.J2ME:小型版(移动 ...
- 推荐系统（5）---大量项目topk近邻相似度
Kd树+BBF(最邻近.次邻近查询)Python实现 kd树和BBF算法 精确Top-K检索及其加速方法探讨