经典的ExtJs 增删改查
来源：互联网 发布：更改淘宝店铺主营类目 编辑：程序博客网 时间：2024/04/27 13:36
经典的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 storestore = 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:' );//toolbartoolbarBizMon = Ext.create('Ext.toolbar.Toolbar', { region: 'north', width : 500, items: [ '->', { xtype: 'button', // 默认的工具栏类型 text: '增加', handler : Ext.Function.pass(handleBizMonAction, 'bizMonAdd') }, { xtype: 'button', // 默认的工具栏类型 text: '修改', handler : Ext.Function.pass(handleBizMonAction, 'bizMonEdit') }, { xtype: 'button', // 默认的工具栏类型 text: '删除', handler : Ext.Function.pass(handleBizMonAction, 'bizMonDel') },{ xtype: 'button', // 默认的工具栏类型 text: '刷新', handler : Ext.Function.pass(handleBizMonAction, 'bizMonRefresh') } ]});// gridgridBizMon = Ext.create('Ext.grid.Panel', { //title: 'Simpsons',id: "id_girdBizMon", region: 'center', listeners:{cellclick: handleBizGridCellclick }, //记录选择触发 store: Ext.data.StoreManager.lookup('id_storeBizMon'), columns: [ { header: '编号', dataIndex: 'id' }, { header: '监控项', dataIndex: 'name' }, { header: 'URL', dataIndex: 'url'}, //, flex: 1 { header: '当前状态', dataIndex: 'state' }, { header: '状态描述', dataIndex: 'msg' }, { header: '开启', dataIndex: 'enable' }, { header: '最新监测时间', dataIndex: 'dateTime' }, { header: '描述', dataIndex: 'desp' } ], height: 200, width: 400 //renderTo: Ext.getBody()});}function fnCreatePanelBizMon_show(){ console.log( 'fnCreatePanelBizMon_show' ); var w_center = Ext.getCmp('center_id'); var panelid = 'id_panelBizSet'; panelBizSet = Ext.getCmp( panelid ); if( panelBizSet == null || panelBizSet == undefined ) { console.log( 'panelBizSet == null ' ); var items = { xtype : 'panel', id : panelid, title:'业务服务监控设置', layout: 'border', //border closable: true, //closeAction : 'destroy', listeners: { click: { element: 'el', //bind to the underlying el property on the panel fn: function(){ console.log('click '); } }, dblclick: { element: 'body', //bind to the underlying body property on the panel fn: function(){ console.log('dblclick body'); } } }, close :{ fn: function(){ console.log(' close ' + panelid); } } } w_center.add( items ); panelBizSet = Ext.getCmp( panelid ); }panelBizSet.show(); if( panelBizSet.items.keys.length < 1) //panel.items.keys.length { console.log( 'add toolbar grid ' + toolbarBizMon ); panelBizSet.add( toolbarBizMon ); panelBizSet.add( gridBizMon ); }}//创建修改记录信息的页面 panelfunction fnCreateEditBizMonPanel(){var bShowLevel = false;var bEnable = false;if( RecdataBizMon.data['showLevel'] == 1)bShowLevel = true;if( RecdataBizMon.data['enable'] == 1)bEnable = true; var editForm = Ext.getCmp("id_panelEditBizMon"); if( editForm != undefined ) return ; editForm = Ext.create('Ext.form.Panel', { //title: '增加web监控项', id:'id_panelEditBizMon', bodyPadding: 5, width: 300, height: 300, // 将会通过 AJAX 请求提交到此URL //url: 'save-form.php', // 表单域 Fields 将被竖直排列, 占满整个宽度 layout: 'anchor', defaults: { anchor: '100%' }, // fields:['id', 'desp', 'inTime', 'dateTime', 'msg', // 'reportIntime', 'enable', 'name', 'state', // 'showLevel', 'url', 'reportTime'], // The fields defaultType: 'textfield', items: [{ fieldLabel: '编号', name: 'id', disabled : 'true', value: RecdataBizMon.data['id'], allowBlank: false },{ fieldLabel: '监控名称', name: 'name', value: RecdataBizMon.data['name'], allowBlank: false }, { fieldLabel: '说明', name: 'desp', value: RecdataBizMon.data['desp'], allowBlank: false }, { fieldLabel: '检测间隔时间(秒)', name: 'inTime', xtype:'numberfield', allowBlank: false, maxLength:'10', value: RecdataBizMon.data['inTime'], minValue: 5, maxValue: 600 }, { fieldLabel: '预警间隔时间(分)', name: 'reportIntime', xtype:'numberfield', allowBlank: false, value: RecdataBizMon.data['reportIntime'], minValue: 5, maxValue: 60 }, { fieldLabel: '开启监控', name: 'enable', xtype:'checkboxfield', allowBlank: false, checked: bEnable, //value: Recdata.data['enable'], maxLength:'10' }, { fieldLabel: '是否展示', name: 'showLevel', xtype:'checkboxfield', checked: bShowLevel, //value: Recdata.data['showLevel'], allowBlank: false, maxLength:'10' }, { fieldLabel: '监控地址url', name: 'url', value: RecdataBizMon.data['url'], xtype:'textfield', allowBlank: false } ]});}/** * 创建修改的窗体并显示 */ function fnCreateEditBizMonWin_show() { if( RecdataBizMon == null )Ext.Msg.alert("提示","请先选择要修改的记录!" ); fnCreateEditBizMonPanel() //获取绘制用户窗口的form var monForm = Ext.getCmp("id_panelEditBizMon");//.getForm(); console.log("editForm() bizmonForm: " +monForm ); //初始化用户添加的窗口的Id var editMonWin = Ext.getCmp("id_windowEditBizMon"); if(editMonWin == null){ editMonWin = new Ext.Window({ title: '修改业务监控信息', //width:500, //初始窗口的width的值 //height:500, //x:100, //窗口的初始化x方向的位置 //y:100, //窗口的初始化y方向的位置 plain:true, modal:true, //模式窗口,默认为false layout: 'fit', autoShow: true, closeAction:"hide", //默认窗口隐藏 resizable:false, //窗口的大小不允许拖动,默认为true id:"id_windowEditBizMon", //指定用户添加窗口的Id items:[ monForm ], buttons:[ {text:'保存',handler:function(){ var MonInfo = makeJsonstrFromEditBizMonPanel( monForm ); console.log("editForm() MonInfo: " + MonInfo ); if(monForm.form.isValid()){ var jsonStr = MonInfo;Ext.Ajax.request({ url: '/Monitor/Server', params: { cmd: 1033 }, jsonData : jsonStr,success: function(response, opts) {console.log( response.responseText ); //var obj = Ext.decode(response.responseText); //console.dir(obj); var message = response.responseText; var retObj = Ext.decode( message ); console.log( retObj["msg"] ); Ext.Msg.alert( retObj["msg"] ); if(retObj["success"] == "true"){ Ext.Msg.alert("修改信息","修改成功!" ); storeBizMon.reload(); editMonWin.hide(); }else{ Ext.Msg.alert("修改出误:", retObj["msg"]); } }, failure: function(response, opts) { //无效网址 server-side failure with status code 404 console.log('server-side failure with status code :' + response.status); }}); }else { Ext.Msg.alert("提示信息","表单有错误,请正确填写!"); } }}, {handler:function(){editMonWin.hide();},text:'关闭'}] }); } fnUpdateEditBizPanelUI( monForm ); editMonWin.show(); } //创建增加记录信息的页面 panelfunction fnCreateAddBizMonPanel(){ var tempForm = Ext.getCmp("id_panelAddBizMon"); if( tempForm != undefined ) return ; tempForm = Ext.create('Ext.form.Panel', { //title: '增加监控项', id:'id_panelAddBizMon', bodyPadding: 5, width: 300, height: 300, // 表单域 Fields 将被竖直排列, 占满整个宽度 layout: 'anchor', defaults: { anchor: '100%' }, // fields:['id', 'desp', 'inTime', 'dateTime', 'msg', // 'reportIntime', 'enable', 'name', 'state', // 'showLevel', 'url', 'reportTime'], // The fields defaultType: 'textfield', items: [{ fieldLabel: '监控名称', name: 'name', allowBlank: false }, { fieldLabel: '说明', name: 'desp', allowBlank: false }, { fieldLabel: '检测间隔时间(秒)', name: 'inTime', xtype:'numberfield', allowBlank: false, maxLength:'10', value:5, minValue: 5, maxValue: 600 }, { fieldLabel: '预警间隔时间(分)', name: 'reportIntime', xtype:'numberfield', allowBlank: false, value:10, minValue: 5, maxValue: 60 }, { fieldLabel: '开启监控', name: 'enable', xtype:'checkboxfield', allowBlank: false, checked: true, maxLength:'10' }, { fieldLabel: '是否展示', name: 'showLevel', xtype:'checkboxfield', checked: true, allowBlank: false, maxLength:'10' }, { fieldLabel: '监控地址url', name: 'url', xtype:'textfield', allowBlank: false } ] });}//创建增加的窗体并显示function fnCreateAddBizMonWin_show() { fnCreateAddBizMonPanel(); //获取绘制用户窗口的form var tempForm_panelAddBizMon = Ext.getCmp("id_panelAddBizMon");//.getForm(); //初始化用户添加的窗口的Id var addMonWin = Ext.getCmp("id_windowAddBizMon"); if(addMonWin == null){ addMonWin = new Ext.Window({ title: '增加业务监控项', //width:500, //初始窗口的width的值 //height:500, //x:100, //窗口的初始化x方向的位置 //y:100, //窗口的初始化y方向的位置 plain:true, modal:true, //模式窗口,默认为false layout: 'fit', autoShow: true, closeAction:"hide", //默认窗口隐藏 resizable:false, //窗口的大小不允许拖动,默认为true id:"id_windowAddBizMon", //指定用户添加窗口的Id items:[ tempForm_panelAddBizMon ], buttons:[ {text:'保存',handler:function(){ var MonInfo = makeJsonstrFromAddBizMonPanel( tempForm_panelAddBizMon ); console.log("addForm() MonInfo: " + MonInfo ); if(tempForm_panelAddBizMon.form.isValid()){ var dataStr= MonInfo;Ext.Ajax.request({ url: '/Monitor/Server', params: { cmd: 1032 }, jsonData : dataStr,success: function(response, opts) {console.log( response.responseText ); //var obj = Ext.decode(response.responseText); //console.dir(obj); var message = response.responseText; var retObj = Ext.decode( message ); console.log( retObj["msg"] ); Ext.Msg.alert( retObj["msg"] ); if(retObj["success"] == "true"){ Ext.Msg.alert("提示信息","添加成功!" ); storeBizMon.reload(); addMonWin.hide(); }else{ Ext.Msg.alert("增加异常:", retObj["msg"]); } }, failure: function(response, opts) { //无效网址 server-side failure with status code 404 console.log('server-side failure with status code ' + response.status); }}); }else { Ext.Msg.alert("提示信息","表单有错误,请正确填写!"); } }}, {handler:function(){tempForm_panelAddBizMon.form.reset();},text:'重置'}, {handler:function(){addMonWin.hide();},text:'关闭'}] }); } addMonWin.show(); } /* * 第三部分是控制业务流程 * */function goto3(){} /* * main * */function gotoMain(){} function fnBizSetMain(){initDataBizSet();fnCreateToolGridBizMon();fnCreatePanelBizMon_show();}//增删改查 handleBizMonAction = function( action ) {console.log( 'handleBizMonAction: ' + action );var gird = Ext.getCmp( "id_girdBizMon" ); if( action == "bizMonAdd" ){fnAddBizMon();}if( action == "bizMonDel" ){fnDelBizMon();}if( action == "bizMonEdit" ){fnEditBizMon();}if( action == "bizMonRefresh" ){storeBizMon.reload( );}} function fnAddBizMon(){fnCreateAddBizMonWin_show();}function fnDelBizMon(){if( RecdataBizMon == null )Ext.Msg.alert("提示","请先选择要删除的记录!" ); Ext.Msg.confirm('提示信息','你确定要执行删除操作吗?',function(btn){ if(btn == 'yes'){ /** * 数据提交的一种方式：Ext.Ajax.request({}); */ Ext.Ajax.request({ url:'/Monitor/Server', params:{ cmd: 1034 }, jsonData : Ext.encode(RecdataBizMon.data), //method:'post', success:function(o) { var info = Ext.decode(o.responseText); Ext.Msg.alert("提示信息",info["msg"]); storeBizMon.reload(); return ; }, failure:function(form,action) { Ext.Msg.alert("提示信息","用户信息删除失败!"); return ; } }); } }); }//修改流程function fnEditBizMon(){fnCreateEditBizMonWin_show();} //更新编辑界面的数据function fnUpdateEditBizPanelUI( panel ){var bShowLevel = false;var bEnable = false;if( RecdataBizMon.data['showLevel'] == 1)bShowLevel = true;if( RecdataBizMon.data['enable'] == 1)bEnable = true;panel.form.findField('name').setValue( RecdataBizMon.data['name'] );panel.form.findField('desp').setValue( RecdataBizMon.data['desp'] );panel.form.findField('url').setValue( RecdataBizMon.data['url'] );panel.form.findField('inTime').setValue( RecdataBizMon.data['inTime'] );panel.form.findField('reportIntime').setValue( RecdataBizMon.data['reportIntime'] );panel.form.findField('showLevel').setValue( bShowLevel );panel.form.findField('enable').setValue( bEnable ); }/** * 每行单元格点击事件 */ function handleBizGridCellclick( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ){console.log( 'cellclick: grid ' + grid);console.log( 'cellclick: td ' + td);console.log( 'cellclick: cellIndex ' + cellIndex);console.log( 'cellclick: record ' + record);console.log( 'cellclick: tr ' + tr);console.log( 'cellclick: rowIndex ' + rowIndex);console.log( 'cellclick: e ' + e);//Monid = grid.getStore().getAt(rowIndex).get('id');//console.log( 'id ' + Monid );//var json_data = JSON.stringify( record );console.log( "record 2 json:" + Ext.encode(record.data) );console.log( "record 2 json:" + Ext.encode(grid.getStore().getAt(rowIndex).data) );RecdataBizMon = record;console.log( 'id ' + RecdataBizMon.data['id'] );}/* * 第四部分其它函数 * */function gotoOther(){} function makeJsonstrFromAddBizMonPanel( panel ){var nShowLevel = 0;var nEnable = 0;if( panel.form.findField('showLevel').getValue() == true )nShowLevel =1;if( panel.form.findField('enable').getValue() == true )nEnable =1;var NewWebMon = {id :"0000",name: panel.form.findField('name').getValue(),desp: panel.form.findField('desp').getValue(),inTime: panel.form.findField('inTime').getValue(),dateTime: "1970-01-01 01:01:01",msg: "",reportIntime: panel.form.findField('reportIntime').getValue(),state: 0,showLevel: nShowLevel,enable: nEnable,url: panel.form.findField('url').getValue(),reportTime: "1970-01-01 01:01:01" }return Ext.JSON.encode( NewWebMon );} function makeJsonstrFromEditBizMonPanel( panel ){var nShowLevel = 0;var nEnable = 0;if( panel.form.findField('showLevel').getValue() == true )nShowLevel =1;if( panel.form.findField('enable').getValue() == true )nEnable =1;var NewWebMon = {id :panel.form.findField('id').getValue(),name: panel.form.findField('name').getValue(),desp: panel.form.findField('desp').getValue(),inTime: panel.form.findField('inTime').getValue(),dateTime: "1970-01-01 01:01:01",msg: "",reportIntime: panel.form.findField('reportIntime').getValue(),state: 0,showLevel: nShowLevel,enable: nEnable,url: panel.form.findField('url').getValue(),reportTime: "1970-01-01 01:01:01" }return Ext.JSON.encode( NewWebMon );} 0 0
- 经典的ExtJs 增删改查
- ExtJs 增删改查
- Extjs tree 的简单增删改查
- extjs 增删改查 extjs 增删改查 extjs 增删改查
- extjs+struts（JSON）对表格的增删查改
- extjs常用增删改查操作代码
- Extjs 增删改查基本功能页面Js
- Extjs学习之增删改查
- datagridview的增删改查
- jdbc的增删改查
- GridView 的增删改查
- 联系人的增删查改
- 数据库的增删改查
- Linq的增删改查
- Hibernate的增删改查
- 网页的增删改查
- struts2的增删改查
- XML的增删改查
- 循环队列的相关操作（顺序结构）
- spi传输音频数据结构和流程机制的设计(master->slave)
- Android之水波纹点击效果(RippleView)
- 快速排序算法（递归）
- centos7.2安装图形化界面
- 经典的ExtJs 增删改查
- 基于RTOS的c语言实现http文件上传
- 豆瓣上9分以上的IT书籍-编程语言篇
- Android根据Json直接生成JavaBean
- JAVA文件
- sqoop1，将sqlserver导入hbase
- RocketMQ 基本使用
- maven聚合工程的创建和聚合工程的打包
- Linux 内核时钟之oneshot编程
