Extjs 4.07 表单combo的使用

最新推荐文章于 2016-10-18 18:23:10 发布

原创最新推荐文章于 2016-10-18 18:23:10 发布 · 870 阅读

0 ·

CC 4.0 BY-SA版权

ExtJS 4 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种创建分类标准添加面板的方法，包括数据模型、组合框配置和表单元素。

前台js脚本

/**
 * 创建分类标准添加面板
 * @returns
 */
function createStandardAddPanel(){
	//创建数据模型
	Ext.regModel('codeInfo',{
		fields:[{name:'code'}]
	});
	//定义组合框中显示的数据
	var typeStore=Ext.create('Ext.data.Store',{
		model:'codeInfo',
		proxy:{
			type:'ajax',
			url:'TypeServlet?type=combo',
			autoLoad: true,
			reader:new Ext.data.JsonReader({model:'codeInfo'})
		}
	});
	return new Ext.form.Panel({   
		id:'typeStandardAdd',
		title:'添加分类标准',   
        bodyStyle:'padding:0 0 0 0 ',//表单边距   
        frame:true, 
        width : document.body.clientWidth - 300,
        height:'100%',
        items:[{
            fieldLabel : '请输入标准标识',
            id : 'standardId',
            name:'standardId',
            height:'30',
            xtype : 'textfield',
            emptyText : '请填写标准标识',
            allowBlank : false
         },{
             fieldLabel : '请选择分类代码',
             id : 'comboTypeName',
             name:'comboTypeName',
             height:'30',
             xtype : 'combo',
             listConfig:{
            	 loadingText:'正在加载分类代码',//加载数据时显示的提示信息
            	 emptyText:'未找到匹配值',//当值不在列表时的提示信息
            	 maxHeight:60//设置下拉列表的最大高度为60像素
             },
             allQuery:'allType',//查询全部信息的查询字符串
             minChars:2,//下拉列表框自动选择前用户需要输入的最小字符数量
             queryDelay:300,//查询延迟时间
             queryParam:'searchType',//查询名字
             triggerAction:'all',//单击触发按纽显示全部数据
             store:typeStore,//设置数据源
             displayField:'code',//定义显示字段
             displayValue:'code',//定义值字段
             queryMode:'remote',//远程模式
             typeAhead: true  
          },{
             fieldLabel : '请输入分类名称',
             id : 'standardName',
             name:'standardName',
             height:'30',
             xtype : 'textfield',
             emptyText : '请填写分类名称',
             allowBlank : false
          }],
	 buttons : [{
         text : '确定',
         handler : function() { 
        	 addTypeStandard();
         }
     }, {
         text : '重置',
         handler : function() {                            
         }
     } ]
    }); 
}

后台java输出json形式

{"id":9,"code":"JTKC"},{"id":10,"code":"ss"}