⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 form.html

📁 几个非常有用的EXT实例
💻 HTML
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>省份与城市联动的例子</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
</head>
<body>
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../ext-all.js"></script>
  <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
  <script type="text/javascript" src="city.js"></script>
  <script>
Ext.onReady(function(){

	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';

	////重载Grid的排序 applySort
	Ext.data.Store.prototype.applySort = function(){ //重载 applySort
		if(this.sortInfo && !this.remoteSort){
	    var s = this.sortInfo, f = s.field;
	    var st = this.fields.get(f).sortType;
	    var fn = function(r1, r2){
	      var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
	        // 添加:修复汉字排序异常的Bug
	       if(typeof(v1) == "string"){ //若为字符串，
	         return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持
	       }//if
	      return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
	    };//fn
	    this.data.sort(s.direction, fn);
	    if(this.snapshot && this.snapshot != this.data){
	        this.snapshot.sort(s.direction, fn);
	    }//if
		}//if
	};

	
	var provinceComBo=new Ext.form.ComboBox({
		hiddenName:'province',
		name: 'province_name',
		valueField:"text",
		displayField:"text",
		mode:'local',
		fieldLabel: '所在省份',
		blankText:'请选择省份',
		emptyText:'请选择省份',
		editable:false,
		anchor:'90%',
		forceSelection:true,
		triggerAction:'all',
		store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),
		listeners:{
			select:function(combo, record,index){
				cityCombo.clearValue();
				cityCombo.store.loadData(record.data.city);
			}
		}
	})

	var cityCombo=new Ext.form.ComboBox({
		hiddenName:'city',
		name:'city_name',
		valueField:"text",
		displayField:"text",
		mode:'local',
		fieldLabel: '所在城市',
		blankText:'请选择城市',
		emptyText:'请选择城市',
		editable:false,
		anchor:'90%',
		forceSelection:true,
		triggerAction:'all',
		store:new Ext.data.SimpleStore({fields: ["text"],data:[],sortInfo:{field:'text'}})
	});

	    
	var simpleForm = new Ext.FormPanel({
	    labelAlign: 'left',
	    title: '省份与城市联动的例子',
	    buttonAlign:'center',
	    bodyStyle:'padding:5px',
	    width: 600,
	    frame:true,
	    labelWidth:80,
	    items: [{
        layout:'column',
        border:false,
        labelSeparator:'：',
        items:[{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [provinceComBo]
        },{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [cityCombo]
        }],
      }],
	    buttons:[{
        text: '保存',
        handler:function(){
        	if(simpleForm.form.isValid()){
	        	this.disabled=true;
        		simpleForm.form.doAction('submit',{
							url:'test.asp',
							method:'post',
							params:'',
							success:function(form,action){
								Ext.Msg.alert('操作',action.result.data);
								this.disabled=false;
							},
							failure:function(){
								Ext.Msg.alert('操作','保存失败！');
								this.disabled=false;
							}
        		});
        	}
        }            
	    	},{text: '取消',handler:function(){simpleForm.form.reset();}
	    }]
	});
	
	simpleForm.render(document.body);
	
})

  </script>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -