ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ](2)
2009-09-06 14:53
585 查看
//ext-all.css
HtmlGenericControl css_ext_all = new HtmlGenericControl("link");
css_ext_all.Attributes.Add("type", "text/css");
css_ext_all.Attributes.Add("rel", "stylesheet");
css_ext_all.Attributes.Add("href", EXT_CSS_ALL);
extresource.Add(css_ext_all);
//ext-base.js
HtmlGenericControl js_ext_base = new HtmlGenericControl("script");
js_ext_base.Attributes.Add("type", "text/javascript");
js_ext_base.Attributes.Add("src", EXT_JS_BASE);
extresource.Add(js_ext_base);
//ext-all.js
HtmlGenericControl js_ext_all = new HtmlGenericControl("script");
js_ext_all.Attributes.Add("type", "text/javascript");
js_ext_all.Attributes.Add("src", EXT_JS_ALL);
extresource.Add(js_ext_all);
//ext-lang-zh_CN.js
HtmlGenericControl js_ext_lang = new HtmlGenericControl("script");
js_ext_lang.Attributes.Add("type", "text/javascript");
js_ext_lang.Attributes.Add("src", EXT_JS_LANGUAGE);
extresource.Add(js_ext_lang);
//EasyExt.js
HtmlGenericControl js_ext_easyext = new HtmlGenericControl("script");
js_ext_easyext.Attributes.Add("type", "text/javascript");
js_ext_easyext.Attributes.Add("src", EXT_JS_EASYEXT);
extresource.Add(js_ext_easyext);
}
#endregion
#region Method
/// <summary>
/// 添加Ext资源文件
/// </summary>
/// <param name="head"></param>
/// <param name="page"></param>
public static void Add(HtmlHead head, System.Web.UI.Page page)
{
if (head != null)
{
if (extresource != null)
{
//head.Controls[0]为title
head.Controls.AddAt(1, extresource[0]);
head.Controls.AddAt(2, extresource[1]);
head.Controls.AddAt(3, extresource[2]);
head.Controls.AddAt(4, extresource[3]);
// head.Controls.AddAt(5, extresource[4]);
}
}
}
#endregion
}
}
根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！
2.3 add.aspx
add页面注意是继承PageBase，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="add.aspx.cs" Inherits="add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单控件</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
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
});
}
});
</script>
</form>
</body>
</html>
注意这里并没有引入Ext相关的js、css文件，这个都在PageBase中处理加载了，这样只要需要用Ext的页面继承PageBase即可，也方便大家将来升级ext，只需要改下配置文件即可。
三、对ExtJS的一点看法
就是上面那段代码得以让效果图中的那副美图与大家见面，虽然对于美工来讲并非难事，可对于非美工的我是极尽享受的，且兼容我当前电脑中三种浏览器IE6、Firefox3.5.2、谷歌浏览器2.0。
在 使用IHttpHandler做权限控制 中曾经提到过用PageBase中做权限控制，在ExtJs应用中也能很好的结合起来使用，节省了代码、解决了每次引用以及按顺序引用等问题，且便于版本迁移。
关于ExtJS慢这个问题。首先从适用性方面，如果你对于性能要求很高，基本上可以放弃，这本身就是富客户的应用，适合一些内部的管理系统、后台，对没有美工的小公司有很大的帮助；性能方面，大家可以google下关键字：“extjs 性能优化”，有相关的文件来建议你改进它的性能，从ext资源文件加载方面，可以使用客户端缓存技术，比如你可以把这个文件放到登录的页面里面，然后客户端缓存起来，具体可以参照js客户端缓存；还需要特别注意的是需要你在代码中指定Ext.BLANK_IMAGE_URL，因为他默认会去extjs的官方网站下载s.gif图片，这里我把已经它加在了ext-lang-zh_CN.js文件里。
本博相关或您可能感兴趣的文章
1. ExtJs 动态RadioGroup的子项 [ Ext | RadioGroup | items ]
2. ExtJs Grid 合计 [Ext | GridPanel | GridSummary]
3. 使用IHttpHandler做权限控制[ASP.NET | IHttpHandler | AjaxPro | UserHostName]
4. Visual Studio 模板 —— 自定义WebForm模板
四、下载
ExtJS2009-9-6
结束语
如果心动了，你也来试试吧 : )下篇文章将完成一个完整的表单提交，包括验证和一些对ExtJS的封装。
HtmlGenericControl css_ext_all = new HtmlGenericControl("link");
css_ext_all.Attributes.Add("type", "text/css");
css_ext_all.Attributes.Add("rel", "stylesheet");
css_ext_all.Attributes.Add("href", EXT_CSS_ALL);
extresource.Add(css_ext_all);
//ext-base.js
HtmlGenericControl js_ext_base = new HtmlGenericControl("script");
js_ext_base.Attributes.Add("type", "text/javascript");
js_ext_base.Attributes.Add("src", EXT_JS_BASE);
extresource.Add(js_ext_base);
//ext-all.js
HtmlGenericControl js_ext_all = new HtmlGenericControl("script");
js_ext_all.Attributes.Add("type", "text/javascript");
js_ext_all.Attributes.Add("src", EXT_JS_ALL);
extresource.Add(js_ext_all);
//ext-lang-zh_CN.js
HtmlGenericControl js_ext_lang = new HtmlGenericControl("script");
js_ext_lang.Attributes.Add("type", "text/javascript");
js_ext_lang.Attributes.Add("src", EXT_JS_LANGUAGE);
extresource.Add(js_ext_lang);
//EasyExt.js
HtmlGenericControl js_ext_easyext = new HtmlGenericControl("script");
js_ext_easyext.Attributes.Add("type", "text/javascript");
js_ext_easyext.Attributes.Add("src", EXT_JS_EASYEXT);
extresource.Add(js_ext_easyext);
}
#endregion
#region Method
/// <summary>
/// 添加Ext资源文件
/// </summary>
/// <param name="head"></param>
/// <param name="page"></param>
public static void Add(HtmlHead head, System.Web.UI.Page page)
{
if (head != null)
{
if (extresource != null)
{
//head.Controls[0]为title
head.Controls.AddAt(1, extresource[0]);
head.Controls.AddAt(2, extresource[1]);
head.Controls.AddAt(3, extresource[2]);
head.Controls.AddAt(4, extresource[3]);
// head.Controls.AddAt(5, extresource[4]);
}
}
}
#endregion
}
}
根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！
2.3 add.aspx
add页面注意是继承PageBase，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="add.aspx.cs" Inherits="add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单控件</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
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
});
}
});
</script>
</form>
</body>
</html>
注意这里并没有引入Ext相关的js、css文件，这个都在PageBase中处理加载了，这样只要需要用Ext的页面继承PageBase即可，也方便大家将来升级ext，只需要改下配置文件即可。
三、对ExtJS的一点看法
就是上面那段代码得以让效果图中的那副美图与大家见面，虽然对于美工来讲并非难事，可对于非美工的我是极尽享受的，且兼容我当前电脑中三种浏览器IE6、Firefox3.5.2、谷歌浏览器2.0。
在 使用IHttpHandler做权限控制 中曾经提到过用PageBase中做权限控制，在ExtJs应用中也能很好的结合起来使用，节省了代码、解决了每次引用以及按顺序引用等问题，且便于版本迁移。
关于ExtJS慢这个问题。首先从适用性方面，如果你对于性能要求很高，基本上可以放弃，这本身就是富客户的应用，适合一些内部的管理系统、后台，对没有美工的小公司有很大的帮助；性能方面，大家可以google下关键字：“extjs 性能优化”，有相关的文件来建议你改进它的性能，从ext资源文件加载方面，可以使用客户端缓存技术，比如你可以把这个文件放到登录的页面里面，然后客户端缓存起来，具体可以参照js客户端缓存；还需要特别注意的是需要你在代码中指定Ext.BLANK_IMAGE_URL，因为他默认会去extjs的官方网站下载s.gif图片，这里我把已经它加在了ext-lang-zh_CN.js文件里。
本博相关或您可能感兴趣的文章
1. ExtJs 动态RadioGroup的子项 [ Ext | RadioGroup | items ]
2. ExtJs Grid 合计 [Ext | GridPanel | GridSummary]
3. 使用IHttpHandler做权限控制[ASP.NET | IHttpHandler | AjaxPro | UserHostName]
4. Visual Studio 模板 —— 自定义WebForm模板
四、下载
ExtJS2009-9-6
结束语
如果心动了，你也来试试吧 : )下篇文章将完成一个完整的表单提交，包括验证和一些对ExtJS的封装。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ](1)
- ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
- ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
- ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ] (1)
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ](2)
- ExtJs简单form表单控件
- ExtJS的使用方法汇总2——表单与输入控件
- 【ZT】asp.NET去掉form的runat="server"照样使用服务器控件，包括表单的服务器控件
- ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
- 关于JQuery中两个要注意的地方(结合Extjs的grid滚动条及使用form插件提交表单)
- ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
- 使用extJs 2.0的form提交表单（非AJAX方式）
- asp.NET去掉form的runat="server"照样使用服务器控件，包括表单的服务器控件
- ExtJS 3.4 form表单中isDirty()的使用方法
- 不使用ASP.NET服务器端控件（包括form表单不加runat="server"）来触发.cs里的事件（方法），（适用于有代码洁癖者）。