extjs课程之form表单
日期：2014-05-16 浏览次数：20363 次
csdn-link:http://blog.csdn.net/maomaolingyu/archive/2010/12/21/6089307.aspx
一：页面（jsp）导入extjs引用文件
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/ext-3.3.0/resources/css/ext-all.css">
?<script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/adapter/ext/ext-base.js"></script>
?<script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/ext-all-debug.js"></script>
?<script type="text/javascript" src="<%=basePath %>jquery1.4.2.js"></script>
?<script type="text/javascript" src="<%=basePath %>test/jsonUtil.js"></script>
? <script type="text/javascript" src="<%=basePath %>Form.js"></script>
<!-- this can put your customer js-->
<body>
??? <div id="show" class="div_1">
? ??? ???
? ??? </div>
</body>
一般来说extjs的页面很少都很多乱七八糟的代码，要是完全基于ext的话可以不放置或者少量的div就行
二：Form.js:
Ext.onReady(function(){//指定页面加载完毕就开始执行类似与juery$()
??? Ext.QuickTips.init();//悬停提示
??? Ext.form.Field.prototype.msgTarget='side'; //提示方式? qtip','side','title','under'
??? var username = new Ext.form.TextField({
??? ??? id:'ID_username',
??? ??? emptyText:'please enter you name',
??? ??? fieldLabel:'用户名',
??? ??? //focusClass:'x-date-bottom',
??? ??? inputType:'text',
??? ??? invalidClass:'x-date-bottom',//当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
??? ??? invalidText:'error',
??? ??? name:'username',
??? ??? regex :/^a.*$/,//验证的正则表达式 只能以a开头
??? ??? regexText:'不合法'//错误提示信息
??? ???
??? })
??? var boy = new Ext.form.Radio({
??? ??? id:'ID_boy',
??? ??? name:'user_sex',
??? ??? boxLabel:'男',
??? ??? checked:true,
??? ??? inputValue:'1'
??? });
??? var girl = new Ext.form.Radio({
??? ??? id:'ID_girl',
??? ??? name:'user_sex',
??? ??? boxLabel:'女',
??? ??? inputValue:'2'
??? });
???
??? var sexgroup = new Ext.form.RadioGroup({ //单选按钮布局
??? ??? id:'ID_sex',
??? ??? name:'usersex',
??? ??? coloum:1,
??? ??? fieldLabel:'性别',
??? ??? items:[boy,girl]
??? });
???
??? var game = new Ext.form.Checkbox({
??? ??? id:'ID_game',
??? ??? inputValue:'game',
??? ??? boxLabel:'游戏'
??? })
??? var music = new Ext.form.Checkbox({
??? ??? id:'ID_music',
??? ??? inputValue:'music',
??? ??? boxLabel:'游戏'
??? })
???
??? var sport = new Ext.form.Checkbox({
??? ??? id:'ID_sport',
??? ??? inputValue:'sport',
??? ??? boxLabel:'运动'
??? })
???
??? var hobby = new Ext.form.CheckboxGroup({//复选框布局
??? ??? id:'ID_hobby',
??? ??? name:'user_hobby',
??? ??? coloum:1,
??? ??? items:[game,music,sport]
??? })
???
??? var birthday = new Ext.form.DateField({//日期选择框
??? ??? id:'ID_birthday',
??? ??? name:'birthday',
??? ??? emptyText :'选择出生日期',
??? ??? fieldLabel:'出生日期',
??? ??? format:'Y-m-d',
??? ??? minValue:'1948-02-01',?
??? ??? maxValue:'2109-12-31',?
??? ??? allowBlank:false,?
??? ??? value:new Date().dateFormat('Y-m-d')
??? });
??? var provinceproxy = new Ext.data.HttpProxy({
??? ??? url:'user.do?md=showProvince'//return {citys:[{id:'4',city:'haidian'},{id:'5',city:'cw'},{id:'6',city:'csd'}]}
??? });
??? var provincereader = new Ext.data.JsonReader({
??? ??? root:'provinces',
??? ??? fields: [{name:'id'},{name:'province'}]
??? ??? }???
??? );
???? var provincestore = new Ext.data.Store({
??? ???? ??? ?proxy:provinceproxy,
??? ???? ??? ?reader:provincereader???
??? ?});
下面解析下proxy,store,reader三个extjs对内容的处理的类：
A proxy是访问网络资源的代理，可以通过它向服务器发起请求，返回需要的数据
<