版本生成|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.         }); 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/holyes/p/29196c73c992bca3a55cf5e54a20248e.html