ListView/ListBox

开发平台：
Java

edit-gridnojava.js：源码内容
							/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
/**
 * 无 DWR Java 后台静态页面演示版本.
 * 简体中文 Demo 制作: 刘长炯 beansoft@126.com
 * http://beansoft.blogjava.net/
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
	// 格式化日期显示
    function formatDate(value){
        return value ? value.dateFormat('Y, M d') : '';
    }
	
	// 格式化性别显示,这是个 renderer, 渲染器
	function formatSex(value) {
		return value ? "男" : "女";
	}
	
    // 弄个缩写的别名
    var fm = Ext.form;
    // 列模型定义了表格所有列的信息, 
	// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
    var cm = new Ext.grid.ColumnModel([
    		{
           id:'id',
           header: "编号",
           dataIndex: 'id',
           width: 50
        },
        
		{
           id:'name',
           header: "用户名",
           dataIndex: 'name',
           width: 250,
           editor: new fm.TextField({
               allowBlank: false// 不能为空
           })
        },
		
		{
           header: "地区",
           dataIndex: 'area',
           width: 100,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'area',// 对应的选择框的ID
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },
		
		{
           header: "电子邮件",
           dataIndex: 'email',
           width: 220,
           align: 'left',
           editor: new fm.TextField({
               allowBlank: true
           })
        },
		
		{
           header: "年龄",
           dataIndex: 'age',
           width: 70,
           align: 'right',
           editor: new fm.NumberField({
               allowBlank: true,
               allowNegative: false,
               maxValue: 100
           })
        },
		
		{
           header: "生日",
           dataIndex: 'birthDay',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'y/m/d',
                minValue: '1970/01/01',//最小值
                disabledDays: [0, 6],// 禁止选择的日期
                disabledDaysText: '不许周末出生孩子'
            })
        },
		
		{
           header: "性别",
           dataIndex: 'sex',
           width: 95,
		   renderer: formatSex,
           editor: new fm.Checkbox()
        }
		
    ]);
    // 默认情况下列是可排序的
    cm.defaultSortable = true;
    // 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
    var User = Ext.data.Record.create([
           // 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
           {name: 'id', type: 'int' },
           {name: 'name', type: 'string'},
		   {name: 'area'},
           {name: 'email', type: 'string'},
           {name: 'age', type: 'int'},             // automatic date conversions
           {name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
           {name: 'sex', type: 'bool'}
      ]);
    // 创建 Data Store
    var store = new Ext.data.Store({
        // 使用 HTTP 加载
        url: 'users.xml',
        // 因为返回值是 XML, 所以我们创建一个解析器
        reader: new Ext.data.XmlReader({
               // 记录必须包含 "user" 标签
               record: 'user'
           }, User),
        sortInfo:{field:'name', direction:'ASC'}// 排序信息
    });
    // 创建编辑器表格
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:800,
        height:300,
        autoExpandColumn:'name',
        title:'用户管理',// 标题
        frame:true,
        clicksToEdit:1,//设置点击几次才可编辑
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据
		// 顶部工具栏按钮
        tbar: [
		
		{
            text: '添加用户',
			iconCls:'add',//按钮图标的CSS名称
			 
            handler : function(){// 点击按钮执行的操作
            	var n = grid.getStore().getCount();// 获得总行数
                var p = new User({
                	id: n + 1,
                    name: '新用户' + n,
                    area: '北京',
					email: 'beansoft@126.com',
                    age: 20,
                    birthDay: (new Date()).clearTime(),
                    sex: true
                });
                
                grid.stopEditing();// 停止编辑
				
                store.insert(n, p);// 插入到最后一行
                grid.startEditing(n, 1);// 开始编辑1单元格
            }
        },
		
		{
            text: '查看所选',
			iconCls: 'details',
            handler : function(){
                var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                if(recordtoedit) {
					Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
					// alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
				}
            }
        },
		
		{
            text: '删除所选',
			iconCls:'remove',
            handler : function(){
                var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                
                if(!record){
					Ext.Msg.alert("提示","请先选择要删除的行!");
					return;
				}
			
				// 弹出对话框警告
				if(record) {
					Ext.MessageBox.confirm('确认删除', 
		    	    	'你真的要删除所选用户吗?', 
		    	    	function(btn) {
			    	     if(btn == 'yes') {// 选中了是按钮
		    	     		// 更新界面, 来真正删除数据
					 		store.remove(record);
						 }
						}
					);
				}
				
            }
        },
		
		{
            text: '删除所有',
			iconCls: 'user-delete',
            handler : function(){
				Ext.MessageBox.confirm('确认删除', 
		    	    	'你真的要删除所有用户信息吗?', 
		    	    	function(btn) {
			    	     if(btn == 'yes') {// 选中了是按钮
		    	     		// 更新界面, 来真正删除数据
					 		store.removeAll();
						 }
						}
					);
				
            }
        }
		
		]
    });
	
	// 单元格编辑后事件处理
	grid.on("afteredit", afterEdit, grid);
	
	// 事件处理函数
	function afterEdit(e) {
		var record = e.record;// 被编辑的记录
		
		// 显示等待对话框
		Ext.Msg.wait("请等候", "修改中", "操作进行中..."); 
  	    // 更新界面, 来真正删除数据
			Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name") + "n 修改的字段是:" 
			+ e.field);// 取得用户名
		
	};
    // 触发数据加载
    store.load();
});

						