zoukankan      html  css  js  c++  java

  • 版本生成|Ext form输入框后加文字说明

    function games(){
        $result = $this->DB1->select('id,name')->get('game');
        echo '{"data":'.json_encode($result->result()).'}';
    }
     
     
     
    var libStore = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
    url : 'VersionMgr/games'
    }),
    reader : new Ext.data.JsonReader({
    root : "data"
    }, [{name : "id"},
    {name : "name"}])
    });
    // libStore = [['90','HUG'],['78','test']];
    var libCombo = new Ext.form.ComboBox({
    store : libStore,
    emptyText : "请选择名称",
    editable : false,
    id : "game",
    fieldLabel : "业务名称",
    displayField : "name",
    valueField : "id",
    value : "",
    width : 200,
    triggerAction : "all",
    allowBlank:false,
    // mode : "local"
    });
    //编码选择
    var encoding = new Ext.form.ComboBox({
    store : [['GBK','GBK'],['UTF-8','UTF-8'],['GB2312','GB2312'],['UTF-16','UTF-16'],['windows-1252','windows-1252'],['ISO-8859-1','ISO-8859-1']],
    emptyText : "请选择编码 ",
    editable : false,
    id : "encoding",
    fieldLabel : "版本编码",
    value : "",
    width : 200,
    triggerAction : "all",
    allowBlank:false,
    mode : "local"
    });
    var version_postWindow = new Ext.Window({
    title: '版本生成',
    400,
    height:200,
    collapsible:true,
    maximizable:true,
    bodyStyle:'padding:5px 25px 0',
    plain:true,
    modal:true,
    defaultType: 'textfield',
    items: [{
    xtype : 'form',
    id:'version',
    baseCls:"x-plain",
    defaultType: 'textfield',
    items:[
    libCombo
    ,encoding
    ,{
    fieldLabel: '版本号',
    id: 'version_show',
    regex : /^[0-9]+$/,
    regexText:"只能输入数字!",
    allowBlank : false,
    sideText : '<font color=red>*如：20120328</font>'
    },{
    fieldLabel: '加密',
    xtype : 'checkbox',
    id: 'encryption'
    }, {
    fieldLabel: '支持URL编码',
    labelSeparator: '',
    xtype : 'checkbox',
    id: 'urlencode'
    }]
    }],
    buttons: [{
    text: '生成',
    handler: function(){
    var panel = version_postWindow.findById('version');
    var form = panel.getForm();
    if(form.isValid()){
    console.log(form.getFieldValues());//取得列值
    // console.log(form.getValues());//取得文本值
    }
    }
    },{
    text: '关闭',
    handler:function(){
    version_postWindow.close();
    }
    }]
    });
    version_postWindow.show(this);
     
     
     
     
     
     
     
     
     
     
     
     
     
    =========================
    buttons: [{
    text: '生成',
    handler: function(){
    console.log(this);
    var panel = version_postWindow.findByType('form')[0];
    var form = panel.getForm();
    if(form.isValid()){
    console.log(form.getValues());
    }
    //获取表单中某个控件的值
    // this.getForm().findField('id').getValue()
    //获取表单中所有控件的值
    // console.log(this.getForm().getValues());
    }
    },{
    text: '关闭',
    handler:function(){
    version_postWindow.close();
    }
    }]
    });
     
    =========================
    var version_form = new Ext.form.FormPanel({
    plain:true,
    layout:"form",
    labelWidth:80,
    baseCls:"x-plain",
    frame : true,
    bodyStyle:'padding:5px 25px 0',
    defaultType: 'textfield',
    items: [libCombo
    ,encoding
    ,{
    fieldLabel: '版本号',
    name: 'version_show',
    regex : /^[0-9]+$/,
    regexText:"只能输入数字!",
    allowBlank : false,
    sideText : '<font color=red>*如：20120328</font>'
    },{
    fieldLabel: '加密',
    xtype : 'checkbox',
    name: 'encryption'
    }, {
    fieldLabel: '支持URL编码',
    labelSeparator: '',
    xtype : 'checkbox',
    name: 'urlencode'
    }
    ]
    });
     
    ==============
    {
    fieldLabel: 'First Name',
    name: 'first',
    regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
    regexText:"只能输入中文!", //正则表达式错误提示
    allowBlank : false //此验证依然有效.不许为空.
    }, new Ext.form.ComboBox({
    transform:"encoding",//html中的id
    80,//宽度
    height:150
    })
    ==================

    Ext学习系列(9)-- Ext.data.HttpProxy

    (2010-03-23 14:32:08)
    转载▼
    标签：

    ext

    httpproxy

    杂谈

    		 分类： EXT

    httpProxy是从object继承来的，事实上source中它和下面的Ext.data.MemoryProxy/Ext.data.ScriptTagProxy都继承于DataProxy
    HttpProxy用于远程代理,而且服务端返回信息时必须指定Content-Type属性为"text/xml".

    HttpProxy( Object conn )
    构造一个HttpProxy对象,参数可以是一个类似于{url: 'foo.php'}这样的json对象,也可以是一个Ext.data.Connection对象,如果参数没有指定，将使用Ext.Ajax对象将被用于发起请求

    getConnection() : Connection
    得到当前连接对象

    load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
    从配置的connection对象得到record数据块，并激发callback
    params:        发起http请求时所要传递到服务端的参数
    DataReader:    见DataReader
    callback:    回叫方法,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志
    scope:        范围
    arg:        这儿的参数将会传递给回叫函数callback

     

    例:

    JS代码:

        Ext.onReady(function() {
                //数据
            var proxy1 = new Ext.data.HttpProxy({ url: "ExtData/Ext_Info3.aspx" });
             
                var reader1 = new Ext.data.JsonReader({
                    root: "data",
                    id: "id",
                    totalProperty: "totalCount",
                    successProperty: "success"
                },
                              [
                               { name: "id", mapping: "id" },
                               { name: "name", mapping: "name" },
                               { name: "sex", mapping: "sex" }
                              ]
                                );

                var ds = new Ext.data.Store({
                    proxy: proxy1,
                    reader: reader1
                });
               ds.load();
               
               
                //获取数据方法
                Ext.get("button1").on("click", function() {

                    for (var a = 0; a < ds.getCount(); a++) {
                        alert(ds.getAt(a).get("name"));
                    }
                    alert("完成");
                });

            });

     

    HTML代码:

    <%=Info %>

    CS代码：

        public StringBuilder Info = new StringBuilder();
        protected void Page_Load(object sender, EventArgs e)
        {
            Info.Append("{totalCount:3,success:true,error:'',singleInfo:'',data:[");
            Info.Append("{'id':'1','name':'tianzhi','sex':'男'},");
            Info.Append("{'id':'2','name':'tianzhi1','sex':'男'},");
            Info.Append("{'id':'3','name':'tianzhi2','sex':'男'}");
            Info.Append("]}");
        }

     
    ================

    Ext form输入框后加文字说明(二)

    分类： Ext 2011-06-16 12:16 298人阅读 评论(2) 收藏 举报

    方法1:在items中加*号

      Js代码  

    [javascript:showcolumns] view plaincopy
    ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
    1. var shortName = new Ext.form.TextField({  
    2.             fieldLabel : '客户简称',  
    3.             name : 'shortName',  
    4.             allowBlank : false,  
    5.             blankText : '客户简称不能为空',  
    6.             width : 100  
    7.         });  
    8. var formPanel = new Ext.form.FormPanel({  
    9.     layout : 'table',  
    10.     layoutConfig : {  
    11.         columns : 3  
    12.     },  
    13.     items : [{  
    14.         layout : 'form',  
    15.         items : [{  
    16.             layout : 'table',  
    17.             items : [{  
    18.                         layout : 'form',  
    19.                         items : [shortName]  
    20.                     }, {  
    21.                         html : '<font id="noFont" class="x-form-item" style="padding-left:1px" mce_style="padding-left:1px" color="red">*</font>'  
    22.                     }]  
    23.         }]  
    24.     }]  
    25. })  

    方法2:覆写onRender方法并添加个sideText属性，并定义样式x-form-sideText

      Js代码

    [javascript:showcolumns] view plaincopy
    ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
    1. /** 
    2.  * 适用于TextField、NumberField(转自互联网) 
    3.  */  
    4. Ext.override(Ext.form.TextField, {  
    5.             sideText : '',  
    6.             onRender : function(ct, position) {  
    7.                 Ext.form.TextField.superclass.onRender.call(this, ct, position);  
    8.                 if (this.sideText != '' && !this.triggerAction) {  
    9.                     this.sideEl = ct.createChild({  
    10.                                 tag : 'div',  
    11.                                 html : this.sideText  
    12.                             });  
    13.                     this.sideEl.addClass('x-form-sideText');  
    14.                 }  
    15.             }  
    16.         });  
    17. /** 
    18.  * 适用于ComboBox 
    19.  */  
    20. Ext.override(Ext.form.ComboBox, {  
    21.             sideText : '',  
    22.             onRender : function(ct, position) {  
    23.                 Ext.form.ComboBox.superclass.onRender.call(this, ct, position);  
    24.                 if (this.sideText != '') {  
    25.                     this.sideEl = ct.first('div').createChild({  
    26.                                 tag : 'div',  
    27.                                 style : 'padding-left: 19px; ',  
    28.                                 html : this.sideText  
    29.                             });  
    30.                     this.sideEl.addClass('x-form-sideText');  
    31.                 }  
    32.                 if (this.hiddenName) {  
    33.                     this.hiddenField = this.el.insertSibling({  
    34.                                 tag : 'input',  
    35.                                 type : 'hidden',  
    36.                                 name : this.hiddenName,  
    37.                                 id : (this.hiddenId || this.hiddenName)  
    38.                             }, 'before', true);  
    39.                     // prevent input submission  
    40.                     this.el.dom.removeAttribute('name');  
    41.                 }  
    42.                 if (Ext.isGecko) {  
    43.                     this.el.dom.setAttribute('autocomplete', 'off');  
    44.                 }  
    45.                 if (!this.lazyInit) {  
    46.                     this.initList();  
    47.                 } else {  
    48.                     this.on('focus', this.initList, this, {  
    49.                                 single : true  
    50.                             });  
    51.                 }  
    52.             }  
    53.         });  

    定义style:

      Html代码

    [xhtml:showcolumns] view plaincopy
    ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
    1. <mce:style>
    2. <!--  
    3.         .x-form-sideText {     
    4.             padding-left: 2px;     
    5.             display: inline-block;     
    6.             display: inline;  
    7.         }    
    8. -->
    9. </mce:style>
    10. <style mce_bogus="1">       
    11.  .x-form-sideText {     
    12.             padding-left: 2px;     
    13.             display: inline-block;     
    14.             display: inline;  
    15.         }  
    16. </style>  

    示例:

      Js代码

    [javascript] view plaincopy
    1. var shortName = new Ext.form.TextField({  
    2.             fieldLabel : '客户简称',  
    3.             name : 'shortName',  
    4.             allowBlank : false,  
    5.             blankText : '客户简称不能为空',  
    6.             sideText : '<font color=red>*</font>',  
    7.             width : 100  
    8.         }); 
  • 相关阅读:
    ASP.NET Core 介绍和项目解读
    C#性能优化总结
    C# 线程知识--使用Task执行异步操作
    异步编程 In .NET(转载)
    .NET实现WebSocket服务端即时通信实例
    .net core 学习笔记一 Program与Startup
    .net core 自定义中间件
    c# 通过json.net中的JsonConverter进行自定义序列化与反序列化
    c# 通过HttpListener创建HTTP服务
    c# 反射实现模型深拷贝
  • 原文地址：https://www.cnblogs.com/holyes/p/29196c73c992bca3a55cf5e54a20248e.html
Copyright © 2011-2022 走看看