ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ](2)

  1. 云栖社区>
  2. 博客>
  3. 正文

ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ](2)

科技小先锋 2017-11-14 19:20:00 浏览650
展开阅读全文

//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文件里。


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586550,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
科技小先锋
+ 关注