- 浏览: 3296879 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
一个实例,包含了大多数表单控件
截图
代码如下
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
一个实例,包含了大多数表单控件
截图
代码如下
Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var form1 = new Ext.FormPanel({ layout: 'form', collapsible: true, autoHeight: true, frame: true, renderTo: Ext.getBody(), title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>', style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;', //设置标签对齐方式 labelAlign: 'right', //设置标签宽 labelWidth: 170, //设置按钮的对齐方式 buttonAlign:'center', //默认元素属性设置 defaults:{ width:180 }, items: [{ fieldLabel: '文本框控件', name: 'TextBox', xtype: 'textfield' //,readOnly : true //只读 //,emptyText :'请输入数据' //为空时显示的文本,注意不是value },{ fieldLabel: '只允许输入数字' ,name:'TextBoxNumber' ,xtype:'numberfield' //,allowDecimals: false // 允许小数点 //,allowNegative: false, // 允许负数 //,maxValue:1000 //最大值 //,minValue:0 //最小值 },{ fieldLabel: '下拉框控件', name: 'DropDownList', xtype: 'combo', //本地数据源 local/remote mode:'local', //设置为选项的text的字段 displayField: "Name", //设置为选项的value的字段 valueField: "Id", //是否可以输入,还是只能选择下拉框中的选项 editable : false, typeAhead: true, //必须选择一项 //forceSelection: true, //输入部分选项内容匹配的时候显示所有的选项 triggerAction: 'all', //selectOnFocus:true, //数据 store:new Ext.data.SimpleStore({ fields: ['Id', 'Name'], data: [ [1,'男'],[0,'女'] ] }) }, { fieldLabel: '日历控件', xtype: 'datefield', name: 'DateControl', format: "Y-m-d", editable : false //, 默认当前日期 //value:new Date().dateFormat('Y-m-d') },{ fieldLabel: '单选控件' ,xtype:'radiogroup' ,name:'Radios' ,items:[ {name : 'RadioItems',boxLabel:'选我',inputValue:'1',checked:true}, {name : 'RadioItems',boxLabel:'选我吧',inputValue:'0'} ] },{ fieldLabel: '复选控件' ,xtype:'checkboxgroup' ,name:'Checkboxs' //columns属性表示用2行来显示数据 ,columns:2 ,items:[ {name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'}, {name : 'CheckboxItems',boxLabel:'苹果',inputValue:'B'}, {name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'}, {name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'} ] },{ fieldLabel: '文本域控件' ,xtype:'textarea' ,value:'可以输好多字!' ,height:50 },{ fieldLabel: '时间控件' ,xtype:'timefield' //格式化输出 默认为 "g:i A" //"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H" ,format:'H:i' //时间间隔(分钟) ,increment: 60 },{ fieldLabel: '标签页' ,xtype:'fieldset' ,title: '标签页' ,autoHeight:true ,items :[{ xtype: 'panel', title: '标签页中的面板', frame: true, height: 50 }] },{ fieldLabel: '在线编辑器' ,xtype:'htmleditor' ,width:260 ,height:100 //以下为默认选项,其他请参照源代码 //,enableColors: false //,enableFormat : true //,enableFontSize : true //,enableAlignments : true //,enableLists : true //,enableSourceEdit : true //,enableLinks : true //,enableFont : true }], buttons: [{ text: "保 存" ,handler:function(){ MsgInfo('保存'); } }, { text: "取 消" ,handler:function(){ form1.form.reset(); } }] }); function MsgInfo(str_msg) { Ext.MessageBox.show({ title: '提示', msg: str_msg, width: 400, icon:Ext.MessageBox.INFO, buttons: Ext.MessageBox.OK }); } });
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
ExtJS ajax request 设置超时时间
2012-05-03 23:32 10017作者:zccst 查了一下资料,设置超时时间有好几种情况 ... -
ExtJS之GridPanel细分功能
2012-01-30 18:45 947zccst整理 二、 一、将结果分组展示 表格数据分组: ... -
ExtJS之EditorGridPanel
2011-12-28 18:01 7202作者:zccst 之前大多用Ext.grid.GridPan ... -
ExtJS正确的学习方式
2011-12-28 15:53 1199ExtJS与其他的技术稍微不同的是需要查手册,而不是从网上搜。 ... -
ExtJS三级联动菜单
2011-12-15 18:04 6051一、前端js代码 // JavaScript Docume ... -
ExtJS之Store
2011-11-09 18:17 20032据目前所知:Store至少分为两类,一个是SimpleStor ... -
ExtJS表单之下拉树
2011-11-09 12:03 5539ExtJS表单之下拉树 作者:zccst 一、数据源 ... -
ExtJS表单之复选框CheckboxGroup展示与取值
2011-11-08 14:23 53859版本一 复选框的值都是 ... -
ExtJS之xtype的意义
2011-11-02 14:21 1580xtype:在EXTJS的可视化组件部署中的一种机制,即通过指 ... -
ExtJS面板
2011-11-02 12:13 1395面板的定义与多种面板的区别 一、Panel var panel ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2011-11-02 11:48 990Ext中的get、getDom、getCmp、getBody、 ... -
ExtJS开发环境搭建
2011-06-20 14:38 1323需要注意的事项: 1,引入extjs不是引入ext-base ...
相关推荐
EXTJS官方实例大全,包含表单类、桌面应用类、菜单类、游戏特效类等等,运行环境:HTML/ASP.NET、PHP、JSP等,示例截图展示的是一个TAB选项卡以及Windows界面菜单等,是不是很漂亮,更多实例效果请下载本压缩包自行...
这是有关extjs的例子,里面有各种表单的定义,grid的实现
第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单组件ComboBox、time、date 第七讲.ExtJS面板Panel 第八讲.EXtJS布局模式-Auto布局、Fit...
title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , ...
4、ExtJS最常用的表单之textfield控件4 |4 ]8 ~/ d3 Y& k# X 5、ExtJs最常用表单组件Number、CheckBox、Radio* s, r% ~+ k; y# W 6、ExtJs最常用表单组件ComboBox、time、date 7、ExtJS面板Panel t1 E( w8 g6 ?/ L' ...
EXTJS介绍,如何使用,tag标签介绍,Extjs开发实例总结。表单介绍,grid操作,弹出窗口,提示框等
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
ExtJS布局之border实例 border布局是常见的布局样式,下面是一个实际项目的示例,比较简单,仅供初学者参考。 前两天遇到一个border布局的界面问题,如下: west是一个tree a,center是一个tree b和一个Panel,...
基于S2SH+Extjs4.1的一个简单入门项目
一个使用了EXTJS框架的表单检测判断,及提示效果,当输入类型不符时,会无刷新弹出提示框,在本演示代码的基础上,你可轻松扩展出一个界面漂亮的EXT登录界面,不过觉得ExtJs用了大量的图片来美化界面,貌似会影响...
本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...
本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...
第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 非常有用的开发工具 2.4.1 开发插件spket 2.4.2 FullSource 2.4.3 MicrosoftScriptDebugger 2.5 ExtJS对原有...
基于jquery自定义的美化表单实例的例子,将表单美化成淡蓝色的风格,有点像EXTJS插件的风格,不过这里的代码可要比EXTJS的少的多,喜欢这种风格或对表单美化感兴趣的,这个示例是一个很好的参考,效果如演示截图所示...
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
最常用的表单、面板和布局类,常用的工具类与函数,以及ExtJS对事件的响应。本书还结合现 今流行的Web框架进行改造,将相关技术融合起来应用。AJax已经逐渐渗透到Web开发的各个 方面了,ExtJS能够与其完美结合。讲解...
然后通过4章来详细讲解ExtJS的基本功能,包括:最常用的表单、面板和布局类,常用的工具类与函数,以及ExtJS对事件的响应。《ExtJS Web应用程序开发指南(第2版)》还结合现今流行的Web框架进行改造,将相关技术融合...
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
本文就将演示下一个实例使用该代码只需要13行代码 原始需要25-30行代码搞定,感兴趣的朋友可以参考下哈,希望可以帮助到你