经典的ExtJs 增删改查

经典的ExtJs 增删改查， 不多说，直接上代码  Extjs 4.2.1 

/**
 * 业务监控增删改查 打造一个经典的模板
 * 
 */

/*
 * 本页面分 三个部分 
 * 
 * 第一部分数据类的，比如model 定义 store 定义 界面内的使用变量定义
 * 
 * 第二部分就是画界面的部分， 界面定义及绘画过程该部分完成，代码里有的按钮事件 如果涉及到业务处理超过 5 行，单独形成函数处理
 * 
 * 第三部分就是业务处理， 所有业务相关的处理函数都独立处理
 * 
 * 编码规范： 
 * 关键panel ,grid ,form 需要命名，格式 id命名为 id_panelXXXXX 
 * Store 命名 storeXxxxx ,id 为id_storeXxxxx 
 * 业务函数命名 fnAddXxxxx fnEditXxxxx, 分支函数 用 handleXxxxx 或 handleXxxxxAction
 * 
 */

/*
 * 经典增删改查界面包含如下 主界面 panelBizMonitor = toolbar + gird 增加按钮 会显示增加界面 windows +
 * panel + 小组件 修改按钮 会显示增加界面 windows + panel + 小组件 删除按钮 无界面 刷新按钮 无界面
 * 
 * 界面创建过程： 1.创建主界面 panelBizMonitor， 后期用hide + show控制， panelBizMonitor
 * 放置在panelMain里 2.点击增加，创建 panel及里面的小组件， 把panel放置在 windows里弹出 3.点击修改，创建
 * panel及里面的小组件，需要把选择的数据带入， 把panel放置在 windows里弹出 4.删除，刷新略过
 * 
 */

/*
 * 经典增删改查页面业务控制 0.标准化数据提交及标准化数据返回 与后台交互会很多，接口标准化很有必要，这个标准化仁者见仁 交互方式： 向服务器发送： a.用
 * http的url + cmd = 1001 做为唯一操作编码，例如：localhost:8080/Monitor/Server?cmd=1001
 * b.数据内容采用 json , 下附 A1 服务器下发数据： a. 数据格式json, 格式下附A2
 * 
 * 1.刷新 store.reload()
 * 2.读取表格数据操作，用store发送请求，并显示
 * 3.增加记录，  定义  新的对象， NewWebMon， 转换成json字串， 然后做为请求的内容向后台发送
 * 4.编辑记录，  定义  新的对象， NewWebMon， 转换成json字串， 然后做为请求的内容向后台发送
 * 5.删除记录，  直接转换 record --> json ，  然后做为请求的内容向后台发送,后台根据id删除数据
 *   
A1: 
{"id": "0000", "name": "\u58eb\u5927\u592b", "desp": "234\u58eb\u5927\u592b", "inTime": 5,
 "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": 10, "state": 0, "showLevel": 1, "enable": 1,
 "url": "http\uff1a//sdf", "reportTime": "1970-01-01 01:01:01"}
A2:
{"msg": "0000:?“??????????", "total": 6, "data": [
    {"desp": "34", "inTime": "5", "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": "10", "enable": "1",
     "name": "?￡??¤§?¤?", "id": "2015", "state": "0", "showLevel": "1", "url": "23434",
     "reportTime": "1970-01-01 01:01:01"},
    {"desp": "22", "inTime": "5", "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": "5", "enable": "0",
     "name": "11", "id": "2012", "state": "0", "showLevel": "0", "url": "33", "reportTime": "1970-01-01 01:01:01"},
    {"desp": "?????a??-?–?1", "inTime": "10", "dateTime": "2017-03-17 21:18:11", "msg": "139", "reportIntime": "2",
     "enable": "1", "name": "web ??‘??§", "id": "2011", "state": "0", "showLevel": "2", "url": "127.0.0.1",
     "reportTime": "2017-03-17 21:17:06"},
    {"desp": "333", "inTime": "5", "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": "10", "enable": "1",
     "name": "222", "id": "2022", "state": "0", "showLevel": "1", "url": "4444", "reportTime": "1970-01-01 01:01:01"},
    {"desp": "3", "inTime": "5", "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": "5", "enable": "0",
     "name": "222", "id": "2021", "state": "0", "showLevel": "0", "url": "4", "reportTime": "1970-01-01 01:01:01"},
    {"desp": "324", "inTime": "5", "dateTime": "1970-01-01 01:01:01", "msg": "", "reportIntime": "10", "enable": "1",
     "name": "1111111", "id": "2020", "state": "0", "showLevel": "1", "url": "234",
     "reportTime": "1970-01-01 01:01:01"}], "success": "true"}
 * 
 * 
 */


/*  
 * 第一部分， 数据定义，及全局变量
 * 
 */
function goto1(){} 
 
var storeBizMon = null;
var toolbarBizMon = null ;
var gridBizMon = null; 
var panelBizSet = null; 

var RecdataBizMon = null; //当前选择的记录


//初始化数据
function initDataBizSet(){
		console.log( 'initData '  );		
		// init store
		store = Ext.data.StoreManager.lookup('id_storeBizMon');
		if( undefined != store )
		{
			 
			return ;
		}
		console.log( 'initData store='  + store );
		storeBizMon = Ext.create('Ext.data.Store', {
			    storeId:'id_storeBizMon',
			    fields:['id', 'desp', 'inTime', 'dateTime', 'msg', 'reportIntime', 'enable', 'name', 'state',
			    	'showLevel', 'url', 'reportTime'],
			  
			    proxy: {
			        type: 'ajax',
			        url: '/Monitor/Server?cmd=1031',
			        reader: {
			            type: 'json',
			            root: 'data'
			        }
			    },
			    autoLoad: true
		});
			
}

/*  
 * 第二部分就是画界面的部分
 * 
 */
function goto2(){} 


function fnCreateToolGridBizMon()
{
	console.log( 'fnCreateToolGridBizMon:'  );
	//toolbar
	t