EXTJS4.2中单选框及多选框

EXTJS4.2中单选框及多选框。

单选框:

var flag1 = 1;  //控制事件执行一次的开关
var dataSource = '';
var myStore = '';
var page = '';
var grid = '';
var records = '';
$(function(){
	$('#p').panel('close');
})
Ext.require([
	'Ext.grid.*',
	'Ext.data.*'
]);
Ext.onReady(function() {
	Ext.QuickTips.init();// 标准初始化

	// 建立一个store要使用的 model
	Ext.define('flow_analyse', {
		extend : 'Ext.data.Model',
		fields : [ {
			name : 'validity',
			type : 'String'
		}, {
			name : 'city',
			type : 'String'
		}, {
			name : 'role',
			type : 'String'
		}, {
			name : 'name',
			type : 'String'
		}]
	});

	myStore = Ext.create('Ext.data.Store', {
		model : 'flow_analyse',
		reader: {
            type: 'json',
            root: dataSource
        },
		autoLoad : false
	});
	var multiSelect1=Ext.create('Ext.selection.CheckboxModel',{//选择框
		mode:"SINGLE"//选择模式.有效值是SINGLE, SIMPLE, 和 MULTI. 默认MULTT,设置SINGLE是单选框
	});
	 grid = Ext.create('Ext.grid.Panel', {
		renderTo : 'information_date',// 渲染到一个div上
		frame : true,// 面板渲染
		forceFit : true,// 自动填充panel空白处
		autoHeight:true,
		selModel:multiSelect1,
		columns : [// 列模式
		{ text:'序号', xtype: 'rownumberer', width:50, align : 'center'},
		{
			text : "用户姓名",
			dataIndex : 'name',
			width : 100,
			align : 'center'
		},{
			text : "用户角色",
			dataIndex : 'role',
			width : 100,
			align : 'center'
		}, {
			text : "地市",
			dataIndex : 'city',
			width : 100,
			align : 'center'
			
		}, {
			text : "账户有效期",
			dataIndex : 'validity',
			width : 100,
			align : 'center'
			
		}],
		store : myStore
	});
	/**
	 * 以下是非EXT代码,Ext.onReady(function(){})与$(function(){})具有同样的功能
	 */
	YYYYMMDDstart();
	onclickMenu();
});
单选框取选择的值:

/**
 * 修改用户
 */
function updateUser(){
	records = this.grid.getSelectionModel().getSelection();
	if(records!=''){
		var city = records[0].data.city;
		//控制窗口的弹出
		$('#p').panel('open');
	}else{
		$.messager.alert('提示',"请先选择数据!");
	}
}

多选框:

Ext.onReady(function() {
	Ext.QuickTips.init();// 标准初始化

	// 建立一个store要使用的 model
	Ext.define('flow_analyse', {
		extend : 'Ext.data.Model',
		fields : [ {
			name : 'dateTime',
			type : 'String'
		},{
			name : 'formNum',
			type : 'String'
		},{
			name : 'customerNum',
			type : 'String'
		}, {
			name : 'customerPhone',
			type : 'String'
		}, {
			name : 'customerCountry',
			type : 'String'
		}, {
			name : 'localtion',
			type : 'String'
		}, {
			name : 'content',
			type : 'String'
		}, {
			name : 'customerClassification',
			type : 'String'
		}, {
			name : 'star',
			type : 'String'
		}]
	});

	myStore = Ext.create('Ext.data.Store', {
		model : 'flow_analyse',
		reader: {
            type: 'json',
            root: dataSource
        },
		autoLoad : false
	});
	var multiSelect1=Ext.create('Ext.selection.CheckboxModel');
	 grid = Ext.create('Ext.grid.Panel', {
		renderTo : 'information_date',// 渲染到一个div上
		frame : true,// 面板渲染
		forceFit : true,// 自动填充panel空白处
		autoHeight:true,
		selModel:multiSelect1,
		columns : [// 列模式
		{ text:'序号', xtype: 'rownumberer', width:50, align : 'center'},
		{
			text : "受理日期",
			dataIndex : 'dateTime',
			width : 100,
			align : 'center'
		},{
			text : "工单流水号",
			dataIndex : 'formNum',
			width : 100,
			align : 'center'
		}, {
			text : "客户流水号",
			dataIndex : 'customerNum',
			width : 100,
			align : 'center'
			
		}, {
			text : "客户电话",
			dataIndex : 'customerPhone',
			width : 100,
			align : 'center'
			
		} , {
			text : "区县",
			dataIndex : 'customerCountry',
			width : 100,
			align : 'center'
			
		}, {
			text : "投诉地点",
			dataIndex : 'localtion',
			width : 100,
			align : 'center'
			
		}, {
			text : "投诉内容",
			dataIndex : 'content',
			width : 100,
			align : 'center'
			
		}, {
			text : "客服归类",
			dataIndex : 'customerClassification',
			width : 100,
			align : 'center'
			
		}, {
			text : "星级",
			dataIndex : 'star',
			width : 100,
			align : 'center'
			
		}, {
   			text : "分析",
   			dataIndex : '分析',
   			width : 100,
   			align : 'center',
   			menuDisabled:true,
   			renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
   				var returnStr = "<span style='margin-right:10px'><a href='#' style='text-decoration:underline;color:#5DA4AC;' onclick='complaintsAnalysis(\""+rowIndex+"\")'>分析</a></span>";
   				return returnStr;
   			}
   		}],
		store : myStore
	});
	/**
	 * 以下是非EXT代码,Ext.onReady(function(){})与$(function(){})具有同样的功能
	 */
	YYYYMMDDstart();
	onclickMenu();
});
多选框取选择的值:

/**
 * 投诉批量分析
 * @param formNum
 * @param localtion
 */
function checkOrder(){
	records = this.grid.getSelectionModel().getSelection();
	var formNums = '';
	var localtions = '';
	$.each(records, function(i, val){
		formNums = formNums + ";"+ val.data.formNum;
		localtions = localtions + ";"+ val.data.localtion;
	})
	window.open(path+'/ComplaintsPendingController/redirectBatchAnalysis.do?formNums='+formNums+'&localtions='+localtions);
}



你可能感兴趣的:(EXTJS4.2中单选框及多选框)