ExtjsCode_Test02Panel.js
//#region 用于布局的Panel,左边是Tree，右边是另一个Panel Ext.define('TMS.Test.Test02Panel', { extend: 'Ext.panel.Panel', alias: 'widget.test_test02Panel', border: false, layout: { type: 'fit' }, initComponent: function () { var me = this; Ext.applyIf(me, { items: [{ xtype: 'panel', layout: 'border', border: false, defaults: { split: true }, items: [{ xtype: 'tms_test_test02Tree', width: 250, minWdth: 120, containerScroll: true, autoScroll: true, region: 'west' // listeners: { // click: { // fn: function (thistree, record, item, index, e, eOpts) { // alert(record.get('text')); // }, // scope: me // } // } }, { xtype: 'test_test02CenterPanel', region: 'center' }] }] }); me.callParent(arguments); } }); //#endregion //#region 树的数据(没用) //树的数据 Ext.define('TMS.Test.Test02TreeStore', { extend: 'Ext.data.TreeStore', autoLoad: true, proxy: { type: 'sessionstorage', id: 'myProxyKey' }, root: { expanded: true, children: [{ text: 'detention', leaf: true }, { text: 'homework', expanded: true, children: [ { text: 'book report', leaf: true }, { text: 'algebra', leaf: true } ] }, { text: 'buy lottery tickets', leaf: true }] } }); //#endregion //#region 树的实现 //树 Ext.define('TMS.Test.Test02Tree', { extend: 'Ext.tree.Panel', alias: 'widget.tms_test_test02Tree', initComponent: function () { var me = this; me.contextMenu = me.buildMenu(); var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ text: 'detention', leaf: true }, { text: 'homework', expanded: true, children: [ { text: 'book report', leaf: true }, { text: 'algebra', leaf: true } ] }, { text: 'buy lottery tickets', leaf: true }] } }); store.on('load', function (treeStore, node, records, successful, eOpts) { if (records.length > 0) { if (me.getSelectionModel().getSelection().length < 1) { me.getSelectionModel().select(records[0]); } } }); Ext.apply(me, { store: store, rootVisible: false, columnLines: true, singleExpand: false, autoScroll: true, //singleExpand: false, columns: [{ xtype: 'treecolumn', text: 'Test02Tree', dataIndex: 'text', flex: 1, sortable: false }], listeners: { containercontextmenu: { fn: me.onTreepanelContainerContextMenu, scope: me }, itemcontextmenu: { fn: me.onTreepanelItemContextMenu, scope: me } } }); me.callParent(arguments); }, buildMenu: function () { var me = this; return Ext.create('Ext.menu.Menu', { floating: true, defaultAlign: 'left', defaults: { listeners: { click: { fn: function (item, e, options) { //右键菜单项单击事件 var me = this; if (item != null) { var tag = item.tag; alert(tag); } }, scope: this } } }, items: [{ iconCls: 'add', text: 'AddItem', align: 'left', tag: 'addNode' }, { iconCls: 'add', text: 'AddSubItem', align: 'left', tag: 'addSubNode' }, { iconCls: 'edit', text: 'Edit', align: 'left', tag: 'edit' }, { iconCls: 'delete', text: 'Delete', align: 'left', tag: 'delete' }, { iconCls: 'refresh', text: 'Refresh', align: 'left', tag: 'refresh' }] }); }, //默认一个节点都没有时，弹出该右键菜单 onTreepanelContainerContextMenu: function (dataview, e, eOpts) { alert('e.preventDefault();'); e.preventDefault(); e.stopEvent(); var count = dataview.getStore().getCount(); if (count < 1) { var addSubMenuItem = this.contextMenu('menuitem[tag="addSubNode"]'); var delMenuItem = this.contextMenu.down('menuitem[tag="delete"]'); var ediMenuItem = this.contextMenu.down('menuitem[tag="edit"]'); addSubMenuItem.setDisabled(true); delMenuItem.setDisabled(true); ediMenuItem.setDisabled(true); this.contextMenu.showAt(e.getXY()); } }, // refresh: function (record) { // var me = this; // me.getStore().load(); // }, onTreepanelItemContextMenu: function (dataview, record, item, index, e, eOpts) { //禁止浏览器右键事件 e.preventDefault(); e.stopEvent(); var addSubMenuItem = this.contextMenu.down('menuitem[tag="addSubNode"]'); addSubMenuItem.setDisabled(false); var ediMenuItem = this.contextMenu.down('menuitem[tag="edit"]'); ediMenuItem.setDisabled(false); var leaf = record.get('leaf'); var delMenuItem = this.contextMenu.down('menuitem[tag="delete"]'); delMenuItem.setDisabled(!leaf); this.contextMenu.showAt(e.getXY()); } }); //#endregion //#region 右侧的Panel(Form+Grid) Ext.define('TMS.Test.Test02CenterPanel', { extend: 'Ext.panel.Panel', alias: 'widget.test_test02CenterPanel', border: false, layout: { type: 'border' }, initComponent: function () { var me = this; Ext.applyIf(me, { items: [{ xtype: 'test_test02QueryInfo', region: 'north' }, { xtype: 'test_test02Grid', region: 'center' } ] }); me.callParent(arguments); } }); //#endregion //#region 右上方查询信息的Form /** *description 查询信息面板 *author 程登华 *date 2014-3-28 */ Ext.define('TMS.Test.Test02QueryInfo', { extend: 'Ext.form.Panel', alias: 'widget.test_test02QueryInfo', border: false, defaults: { margin: '5 0 5 10' }, initComponent: function () { var me = this; Ext.applyIf(me, { items: [{ xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 30, margin: '0 5 0 5', labelAlign: 'left' }, items: [{ xtype: 'textfield', id: 'Test02QueryInfoName', fieldLabel: iTestO2.winName }, { xtype: 'textfield', id: 'Test02QueryInfoNum', fieldLabel: iTestO2.winPost }, { xtype: 'button', name: 'searchButton', text: iTestO2.winSearchInfo, iconCls: 'query', width: 80, handler: function () { var me = this; var name = Ext.getCmp('Test02QueryInfoName').getValue(); var num = Ext.getCmp('Test02QueryInfoNum').getValue(); var store = me.up('test_test02CenterPanel').down('test_test02Grid').getStore(); store.clearFilter(true); store.filter([{ property: "name", value: name, anyMatch: true }, { property: "post", value: num, anyMatch: true }]); // store.filterBy(function (record) { // return record.get('name') == name; // }); //store.load(); } }] }] }); me.callParent(arguments); } }); //#endregion //#region 右下方展示数据的Grid /** *description 表格 *author 程登华 *date 2014-3-28 */ Ext.define('TMS.Test.Test02Grid', { extend: 'Ext.grid.Panel', alias: 'widget.test_test02Grid', initComponent: function () { var me = this; Ext.applyIf(me, { autoHeight: true, // singleSelect: true, store: storelll, renderTo: Ext.getBody(), selModel: { selType: 'checkboxmodel' //selType:singleSelect // mode:'SINGLE' }, // selModel: { // //selType: 'checkboxmodel', // singleSelect: true // }, columnLines: true, autoScroll: true, columns: [ { header: iTestO2.winIDNO, dataIndex: 'idno', align: 'center' }, { header: iTestO2.winName, dataIndex: 'name', align: 'center' }, { header: iTestO2.winGender, dataIndex: 'gender', align: 'center' }, { header: iTestO2.winBirthDate, dataIndex: 'birthdate', align: 'center', renderer: Ext.util.Format.dateRenderer('Y-m') }, { header: iTestO2.winCollege, dataIndex: 'college', align: 'center' }, { header: iTestO2.winMajor, dataIndex: 'major', align: 'center' }, { header: iTestO2.winEducation, dataIndex: 'education', align: 'center' }, { header: iTestO2.winEnterDate, dataIndex: 'enterdate', align: 'center', renderer: Ext.util.Format.dateRenderer('Y-m-d') }, { header: iTestO2.winMarriage, dataIndex: 'marrige', align: 'center', renderer: function (value) { return value ? 'Married' : 'Unmarried' } }, { header: iTestO2.winSpousename, dataIndex: 'spousename', align: 'center' }, { header: iTestO2.winChildnum, dataIndex: 'childnum', align: 'center' }, { header: iTestO2.winCellPhone, dataIndex: 'cellphone', align: 'center' }, { header: iTestO2.winEmail, dataIndex: 'email', align: 'center' }, { header: iTestO2.winEmergencyPerson, dataIndex: 'emergencyperson', align: 'center' }, { header: iTestO2.winTellPhone, dataIndex: 'cellphone', align: 'center' }, { header: iTestO2.winDepartment, dataIndex: 'department', align: 'center' }, { header: iTestO2.winPost, dataIndex: 'post', align: 'center' }, { header: iTestO2.winIsActive, dataIndex: 'isactive', align: 'center' } ], dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ text: iGeneral.iAdd, iconCls: 'add', tooltip: iGeneral.iAdd, handler: me.onAddTestInfo }, { text: iGeneral.iEdit, iconCls: 'edit', tooltip: iGeneral.iEdit, handler: me.onEditTestInfo }] }] }); me.callParent(arguments); }, onAddTestInfo: function (btn) { //创建并弹出窗体 var grid = btn.up('test_test02Grid'); var win = Ext.create('TMS.Test.Test02Window', { record: null, edit: false, grid: grid }); win.show(); }, onEditTestInfo: function (btn) { //创建并弹出窗体 var grid = btn.up('test_test02Grid'); var rows = grid.getSelectionModel().getSelection(); if (rows.length == 0) { Ext.Msg.Show(iGeneral.iSeleteOneItem, iGeneral.iNote); return false; } else { var minIndex = grid.getStore().indexOf(rows[0]); //var minIndex = 0; for (var i = 0; i < rows.length; i++) { var ind = grid.getStore().indexOf(rows[i]); minIndex = ind < minIndex ? ind : minIndex; } Ext.create('TMS.Test.Test02Window', { record: grid.getStore().data.getAt(minIndex), rowIndex: minIndex, edit: true, grid: grid, title: 'EditWindow' }).show(); } } }); //#endregion //#region Grid的数据 //ID NO 姓名 性别 出生年月 大学 专业 教育程度 入职时间 // 婚姻状况 配偶姓名 孩子数 手机号码 邮箱地址 紧急联系人 // 应聘部门 岗位 是否激活 var data = [ [420923199010041273, '程登华', '男', '1990-10', 'YangtzeUniversity', 'ComputerScience', 'Senior High School', '2013-08-01', 'UnMarried', '', '', '18674073839', 'Chengdh@163.com', 'ChengFu',12345678, 'Technic R&D Center', 'Programer', 1], [420923199009041275, '周瑜', '男', '1990-09', 'YangtzeUniversity', 'ComputerScience', 'Senior High School', '2013-08-01', 'UnMarried', '', '', '18674073387', 'Zhouyu@qq.com', 'ZhouMu',12734485, 'Technic R&D Center', 'Programer', 1], [420923199609041572, '尹星月', '女', '1996-09', 'YangtzeUniversity', 'ComputerScience', 'Junior High School', '2014-08-01', 'UnMarried', '', '', '15549025970', 'Zhouyu@qq.com', 'YinMu',87878787, 'Human Resource Department', 'Manager', 'false'], [420923199707041333, '小况', '女', '1997-07', 'WaiYuUniversity', 'English', 'Senior High School', '2013-08-01', 'UnMarried', '', '', '13090908989', 'Zhouyu@qq.com', 'KuangFuMu',90909090, 'Human Resource Department', 'Vice Manager', 'false'], [4209231980009041672, '于文杰', '男', '1980-09', 'YeLuUniversity', 'Math', 'bachelor', '2013-08-01', 'Married', '王熙凤', '3', '15098989898', 'Zhouyu@qq.com', 'YuFu',99999999, 'Human Resource Department', 'HR Specialist', 'true'] ]; var storelll = new Ext.data.ArrayStore({ autoLoad: true, data: data, mode: 'local', fields: [ { name: 'idno', type: 'int' }, { name: 'name' }, { name: 'gender' }, { name: 'birthdate', type: 'date', dateFormat: 'Y-m' }, { name: 'college' }, { name: 'major' }, { name: 'education' }, { name: 'enterdate', type: 'date', dateFormat: 'Y-m-d' }, { name: 'marrige', type: 'bool' }, { name: 'spousename' }, { name: 'childnum', type: 'int' }, { name: 'cellphone' }, { name: 'email' }, { name: 'emergencyperson' }, { name: 'cellphone2',type:'int' }, { name: 'department' }, { name: 'post' }, { name: 'isactive', type: 'bool'} //17个字段 ] }); //#endregion //#region 增加和修改信息时弹出的窗体 //定义一个window，显示增加信息 Ext.define('TMS.Test.Test02Window', { extend: 'Ext.window.Window', alias: 'widget.tms_test02Window', border: false, modal: true, autoScroll: true, width: 1010, height: 400, title: iTestO2.winTitle, initComponent: function () { var me = this; var record = me.record; Ext.applyIf(me, { items: [{ xtype: 'form', name: 'infoForm', layout: 'hbox', border: false, bodyPadding: 20, items: [{ xtype: 'fieldcontainer', layout: 'vbox', border: false, bodyPadding: 10, items: [ { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第一行 //1.1 姓名-文本域 xtype: 'textfield', fieldLabel: iTestO2.winName, name: 'name', allowBlank: false, blankText: "name cannot be empty.", value: me.edit ? record.get('name') : null }, { //1.2 性别男女-radiobutton/radiobuttongroup xtype: 'radiogroup', fieldLabel: iTestO2.winGender, columns: 2, items: [ { boxLabel: iTestO2.male, name: 'gender', inputValue: '0' }, { boxLabel: iTestO2.female, name: 'gender', inputValue: '1'}], listeners: { afterrender: { fn: me.onRadiogroupAfterRender, scope: this } } }, { //1.3 出生年月 combo(datefield-(Y-m)) xtype: 'datefield', anchor: '100%', fieldLabel: iTestO2.winBirthDate, maxValue: new Date(), format: 'Y-m', name: 'date', value: me.edit ? record.get('birthdate') : null }] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第二行 //2.1大学 2.2专业 2.3教育背景 xtype: 'combo', fieldLabel: iTestO2.winCollege, store: collegeComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'college', value: me.edit ? record.get('college') : null }, { xtype: 'combo', fieldLabel: iTestO2.winMajor, store: majorComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'major', value: me.edit ? record.get('major') : null }, { xtype: 'combo', fieldLabel: iTestO2.winEducation, store: educationComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'education', value: me.edit ? record.get('education') : null }] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第三行 ID NO 入职时间 xtype: 'textfield', fieldLabel: 'ID NO', name: 'idno', value: me.edit ? record.get('idno') : null }, { xtype: 'datefield', anchor: '100%', fieldLabel: iTestO2.winEnterDate, maxValue: new Date(), name: 'enterdate', value: me.edit ? record.get('enterdate') : null }] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第四行 xtype: 'combo', fieldLabel: iTestO2.winMarriage, store: marriageComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'marrige', value: me.edit ? record.get('marrige') : null }, { xtype: 'textfield', fieldLabel: iTestO2.winSpousename, name: 'spousename', value: me.edit ? record.get('spousename') : null }, { xtype: 'textfield', fieldLabel: iTestO2.winChildnum, name: 'childnum', value: me.edit ? record.get('childnum') : null }] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第六行手机号码 邮箱地址 xtype: 'textfield', fieldLabel: iTestO2.winCellPhone, name: 'cellphone', allowBlank: false, blankText: "phone cannot be empty.", regex: /^\d{11}$/, regexText: 'the cellphone number is invalid !', value: me.edit ? record.get('cellphone') : null }, { xtype: 'textfield', fieldLabel: iTestO2.winEmail, name: 'email', allowBlank: false, blankText: "email cannot be empty.", vtype: 'email', //邮箱验证 vtypeText: 'the email address is invalid !', value: me.edit ? record.get('email') : null }] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第六行 xtype: 'textfield', fieldLabel: iTestO2.winEmergencyPerson, name: 'emergencyperson', value: me.edit ? record.get('emergencyperson') : null }, { xtype: 'textfield', fieldLabel: iTestO2.winTellPhone, name: 'cellphone2', allowBlank: false, blankText: "phone cannot be empty.", regex: /^(\d{3,4}\)|\d{3,4}-|\s)?\d{8}$/, regexText: 'the cellphone number is invalid !', value: me.edit ? record.get('cellphone2') : null } ] }, { xtype: 'fieldcontainer', layout: 'hbox', defaults: { labelWidth: 80, width: 240, margin: '5 0 5 0', msgTarget: 'side', autoFitErrors: false, labelAlign: 'right' }, items: [{ //第七行 xtype: 'combo', fieldLabel: iTestO2.winDepartment, store: departComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'department', value: me.edit ? record.get('department') : null }, { xtype: 'combo', store: postComboStore, queryMode: 'local', displayField: 'name', valueField: 'abbr', name: 'post', value: me.edit ? record.get('post') : null }, { xtype: 'checkbox', boxLabel: iTestO2.winIsActive, inputValue: '1', name: 'isactive', checked: me.edit ? record.get('isactive') : null } ] }, { xtype: 'fieldcontainer', layout: 'hbox', items: [{ //第八行 两个Button xtype: 'button', text: iTestO2.winConfirm, margin: '5 30 5 600', width: 80, height: 25, handler: me.OnSave }, { xtype: 'button', text: iTestO2.winCancel, width: 80, height: 25, margin: '5 0 5 0', handler: me.OnCancel } ] }] //左边的fieldContainer的items }, { xtype: 'fieldcontainer', //放置右边的Container layout: 'vbox', border: false, defaults: { // margin: '0 20 5 0', padding: '10' }, items: [{ xtype: 'image', width: 200, height: 200, border: true, fixed: true, alt: 'Trainer Photo', src: '../Content/Icons/login.png', margin: '0 0 0 0' }, { xtype: 'filefield', regex: new RegExp('\\.(bmp|png|jpg|gif|jpeg)\\b', 'i'), regexText: 'the file is invalid', buttonOnly: true, buttonText: 'Trainer Photo', width: 200, margin: '5 5 5 45', listeners: { scope: me, change: me.onFileChange } }] }] }] }); //Ext.applyIf me.callParent(arguments); }, // 构造函数 OnSave: function (btn) { var form = btn.up('tms_test02Window').down('form'); var values = form.getForm().getValues(); //me.rowIndex //获得grid //获得grid的store //删除数据 //增加数据json格式 var me = btn.up('tms_test02Window'); var store = me.grid.getStore(); Ext.define('TestModel', { extend: 'Ext.data.Model', fields: [ { name: 'idno' }, { name: 'gender' }, { name: 'name' }, { name: 'birthdate' }, { name: 'college' }, { name: 'major' }, { name: 'education' }, { name: 'enterdate' }, { name: 'marrige' }, { name: 'spousename' }, { name: 'childnum' }, { name: 'cellphone' }, { name: 'email' }, { name: 'emergencyperson' }, { name: 'cellphone2' }, { name: 'department' }, { name: 'post' }, { name: 'isactive' } ] }); var newRecord = Ext.create('TestModel', { idno: values['idno'], name: values['name'], gender: parseInt(values['gender']) ? '女' : '男', birthdate: values['date'], college: values['college'], major: values['major'], education: values['education'], enterdate: values['enterdate'], marrige: values['marrige'], spousename: values['spousename'], childnum: values['childnum'], cellphone: values['cellphone'], email: values['email'], emergencyperson: values['emergencyperson'], cellphone2: values['cellphone2'], department: values['department'], post: values['post'], isactive: values['isactive'] ? true : false }); form.checkChange(); if (form.isValid()) { if (btn.up('tms_test02Window').edit) { store.removeAt(me.rowIndex); store.insert(me.rowIndex, newRecord); } else { store.add(newRecord); } //store.reload(); btn.up('tms_test02Window').hide(); } else { alert('Please fill the form correctly.'); } }, OnCancel: function (btn) { btn.up('tms_test02Window').hide(); }, onFileChange: function (thisObj, value, oP) { var newValue = value.replace(/C:\\fakepath\\/g, 'F:\\Pictures\\MY PICTURE\\其他\\'); alert(newValue); }, onRadiogroupAfterRender: function (component, eOpts) { var me = this; if (me.edit) { var value = me.record.get("gender"); var num = value == '男' ? 0 : 1; component.items.items[num].setValue(true); } else component.items.items[0].setValue(true); } }); //定义window //#endregion //#region 弹出窗体的Combo的一些Store //大学 var collegeComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "YangtzeUniversity", "name": "YangtzeUniversity" }, { "abbr": "WaiYuUniversity", "name": "WaiYuUniversity" }, { "abbr": "YeLuUniversity", "name": "YeLuUniversity" } //... ] }); //专业 var majorComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "ComputerScience", "name": "ComputerScience" }, { "abbr": "English", "name": "English" }, { "abbr": "Math", "name": "Math" } //... ] }); //教育背景 var educationComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "Senior High School", "name": "Senior High School" }, { "abbr": "Junior High School", "name": "Junior High School" }, { "abbr": "bachelor", "name": "bachelor" } //... ] }); //婚姻状况 var marriageComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "Married", "name": "Married" }, { "abbr": "UnMarried", "name": "UnMarried" } //... ] }); //部门 var departComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "Technic R&D Center", "name": "Technic R&D Center" }, { "abbr": "Human Resource Department", "name": "Human Resource Department" } //... ] }); //岗位 var postComboStore = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [ { "abbr": "Programer", "name": "Programer" }, { "abbr": "Manager", "name": "Manager" }, { "abbr": "Vice Manager", "name": "Vice Manager" }, { "abbr": "HR Specialist", "name": "HR Specialist" } //... ] }); //#endregion
【原创】
