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 是一个基类 ...
随机推荐
- AdventureWorks 安装和配置[转自 微软msdn]
AdventureWorks 安装和配置 2018/06/19 适用对象:SQL ServerAzure SQL 数据库Azure SQL 数据仓库并行数据仓库 AdventureWorks 下载链接 ...
- Spark机器学习基础-监督学习
监督学习 0.线性回归(加L1.L2正则化) from __future__ import print_function from pyspark.ml.regression import Linea ...
- [转发]C++中new和malloc的区别
原文地址:https://blog.csdn.net/linux_ever/article/details/50533149 new与malloc的10点区别 1. 申请的内存所在位置 new操作符从 ...
- c# 定制Equals()
- 基于beautifulSoup进行电影网站排名的获取与格式化输出
要求 编写代码完成以下任务: ① 将地址"http://www.cbooo.cn/year?year=2019"源代码使用任意方法保存到指定文件中(文件类型不限). ② 使用文件流 ...
- JVM元空间深度解析
回顾一下上一次对于这次做的实验的一个背景说明: 这里将借助cglib这个库来完成动态类的创建,为啥要使用它?因为使用简单,二是在程序运行期可以动态的生成类,动态生成类之后生成类的元数据就会落入到元空间 ...
- eclipse cdt 代码对齐
ctrl + shift + F 快速对齐 平时对小节太不重视了 .
- 赤池信息准则AIC，BIC
很多参数估计问题均采用似然函数作为目标函数,当训练数据足够多时,可以不断提高模型精度,但是以提高模型复杂度为代价的,同时带来一个机器学习中非常普遍的问题——过拟合.所以,模型选择问题在模型复杂度与模型 ...
- 看完100篇Python技术精华文章，平均涨薪30%！
一个以技术为立身根基的教育机构做出来的微信号,干货程度会有多高? 马哥Linux运维公众号运营五年,从一开始的定位就是给技术人分享加薪干货的地方.这五年里,公众号运营最重的任务就是做内容.内容并不好做 ...
- Nginx入门（四）——反向代理
server { listen 8020; server_name localhost; location / { root html; index index.html index.htm; pro ...