Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.form.Field是所有表单输入控件的基类,按属性和功能可以分为三大类:
//1)页面显示样式
//2)控件参数设置
//3)数据有效性检验
var form = new Ext.form.FormPanel({
labelAlign:'right',
labelWidth:50,
width:600,
title:'form',
frame:true,
items:[{
layout:'column',
items:[{
columnWidth:.7,
xtype:'fieldset',
checkboxToggle:true,
title:'单纯输入',
autoHeight:true,
defaults:{width:300},
defaultType:'textfield',
items:[{ //这里{}相当于一个Field
fieldLabel:'文本',
name:'text'
},{
xtype:'numberfield',
fieldLabel:'数字',
name:'number'
},{
xtype:'combo',
fieldLabel:'选择',
name:'combo',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2']
]
}),//end store
displayField:'text',
valueField:'value',
mode:'local',
//transform:'xxx'//可以在把在HTML中id为xxx的下拉框转化为combBox
emptyText:'请选择'
}, new Ext.form.TriggerField({
fieldLabel:'选择B',
name:'name'
}),{
xtype:'datefield',
fieldLabel:'日期',
name:'date'
},{
xtype:'timefield',
fieldLabel:'时间',
name:'time'
},{
xtype:'textarea',
fieldLabel:'多行',
name:'textarea'
},{
xtype:'hidden',
name:'hidden'
}]
},{
columnWidth:.3,// .3 与 3 的区别
layout:form,
items:[{
xtype:'fieldset',
checkboxToggle:true,
title:'多选',
autoHeight:true,
defaultType:'checkbox',
hideLabel:true,
style:'margin-left:10px;',
// bodyStyle:'margin-left:20px;',
items:[{
boxLabel:'AAAAAA',
name:'check',
value:'1',
checked:true,
width:'auto'
},{
boxLabel:'BBBBBB',
name:'check',
value:'2',
checked:true,
width:'auto'
},{
boxLabel:'CCCCCC',
name:'check',
value:'3',
checked:true,
width:'auto'
},{
boxLabel:'DDDDDD',
name:'check',
value:'4',
checked:true,
width:'auto'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
title:'单选',
autoHeight:true,
defaultType:'radio',
hideLabels:true,
style:'margin-left:10px;',
//bodyStyle:'margin-left:20px',
items:[{
boxLabel:'单选1',
name:"rad",
value:'1',
checked:'true',
width:'auto'
},{
boxLabel:'单选2',
name:"rad",
value:'1',
//checked:'true',
width:'auto'
}]
}]
}]
},{
layout:'form',
labelAlign:'top',
autoWidth:true,
height:200,
items:[{
xtype:'htmleditor',
fieldLabel:'在线编辑器',
id:'editor',
anchor:'98%'
}]
}],
buttons:[{
text:'保存'
},{
text:'读取'
},{
text:'取消'
}]
});
//建立一个表格
var grid = new Ext.grid.GridPanel({
width:300,
autoHeight:true,
title:'grid',
store:new Ext.data.SimpleStore({
data:[
['name1','male','descn1'],
['name2','female','descn2']
],
fields:['name','sex','descn']
}),
columns:[
{header:'姓名',dataIndex:'name'},
{header:'性别',dataIndex:'sex'},
{header:'描述',dataIndex:'descn'}
],
viewConfig:{
forceFit:true
}
});
var selectMenu = new Ext.menu.Menu({
// items:[new Ext.menu.Adapter(grid)]//引入Adapter.js
});
form.render("myid");
});
- 大小: 54.1 KB
分享到:
相关推荐
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
学习EXTJS总结的例子,里面含有Grid以及ExtJs扩展的例子源码...
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
extjs官方例子
学习ExtJs Combobox,Panel,源代码分析及例子集。
extJs教程 例子 从入门开始学习 extJs教程 例子 从入门开始学习
Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
ExtJs中表单formPanel的横向布局
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
一个很好的学习Extjs的例子,一个很好的学习Extjs的例子.
extjs简单例子,适合初学者
extjs资料以及extjs学习指南,extjs资料以及extjs学习指南
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,...
非常不错的ExtJs学习总结的例子。欲下载,请从速喔!