EXTJS 4.2 资料 控件之Grid 添加行,编辑行,删除行
删除 添加 控件 编辑 资料 Grid Extjs 4.2
2023-09-11 14:19:36 时间
//SiteVariableConfigValue类,创立一个模型类 Ext.define("SiteVariableConfigValue", { extend: "Ext.data.Model", fields: [ { name: 'SVCValueId', type: 'int', sortable: true }, { name: 'SVCId', type: 'string', sortable: true }, { name: 'KeyInItem', type: 'string', sortable: true }, { name: 'ValueInItem', type: 'string', sortable: true } ] }); var storeSiteVariableConfigValue = Ext.create('Ext.data.Store', { model: 'SiteVariableConfigValue',//这个地方CarAccessoriesType不是一个对象,而是一个类 pageSize: limit, //页容量20条数据 //是否在服务端排序 (true的话,在客户端就不能排序) remoteSort: false, remoteFilter: true, method: 'POST', proxy: {//代理 type: 'ajax', url: '/UI/HttpHandlerData/InformationManagement/InformationManagement.ashx?operation=SearchInfoCollection1', extraParams: { start: start, limit: limit }, reader: { //这里的reader为数据存储组织的地方,下面的配置是为json格式的数据,例如:[{"total":50,"rows":[{"a":"3","b":"4"}]}]//读取器 type: 'json', //返回数据类型为json格式 root: 'Table', //根节点 totalProperty: 'result' //数据总条数 } }, sorters: [{ //排序字段。 property: 'SVCValueId', //排序类型,默认为 ASC direction: 'desc' }], autoLoad: true //即时加载数据 }); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 1, autoCancel: false }); var gridSiteVariableConfigValue = Ext.create('Ext.grid.Panel', { store: storeSiteVariableConfigValue, autoWidth: true, aotuHeight: true, animCollapse: false, enableColumnMove: false, enableHdMenu: false, loadMask: true, loadMask: { msg: '正在载入数据,请稍候...' }, viewConfig: { forceFit: true, stripeRows: true }, forceFit: true, //列表宽度自适应 stripeRows: true,//斑马线 autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小 trackMouseOver: true, //鼠标移动时高亮显示 selModel: { selType: 'checkboxmodel' }, //选择框 scroll: true, layout: 'column', // Specifies that the items will now be arranged in columns columnWidth: 0.60, plugins: [rowEditing], columns: [ { header: '序号', xtype: 'rownumberer', align: 'left', width: 50 }, { header: '键', dataIndex: 'KeyInItem', width: 200, editor: { // xtype: 'textfield' } }, { header: '值', dataIndex: 'ValueInItem', width: 200, editor: { // xtype: 'textfield' } }, ], bbar: [{ xtype: 'pagingtoolbar', store: storeSiteVariableConfigValue, displayMsg: '显示 {0} - {1} 条,共计 {2} 条', emptyMsg: "没有数据", beforePageText: "当前页", afterPageText: "共{0}页", displayInfo: true }], tbar: [{ text: '添加', icon: '/Resources/Images/16x16_easyui/edit_add.png', handler: function () { rowEditing.cancelEdit(); var r = Ext.create('SiteVariableConfigValue', { KeyInItem: '这里是键', ValueInItem: '这里是值' }); gridSiteVariableConfigValue.getStore().insert(0, r); rowEditing.startEdit(0, 0); } }, { text: '删除', icon: '/Resources/Images/16x16_easyui/edit_remove.png', handler: function () { Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function (btn) { if (btn != 'yes') { return; } var sm = gridSiteVariableConfigValue.getSelectionModel(); rowEditing.cancelEdit(); var store = gridSiteVariableConfigValue.getStore(); store.remove(sm.getSelection()); if (store.getCount() > 0) { sm.select(0); } }); }, disabled: true }] });
相关文章
- Java实现 LeetCode 583 两个字符串的删除操作(求最长公共子序列问题)
- Java实现 LeetCode 301 删除无效的括号
- Java实现 LeetCode 26 删除排序数组中的重复项
- Flex4_Tree组件1(添加、删除、展开、关闭、右键菜单)
- 禁止DataGridView控件中添加和删除行
- centos8平台redis cluster集群添加/删除node节点(redis5.0.7)
- magento 添加 删除css js
- Java集合类ArrayList循环中删除特定元素
- js对select动态添加和删除OPTION
- 禁止DataGridView控件中添加和删除行
- Centos7 firewalld详解,添加删除策略
- zookeeper动态添加/删除集群中实例(zookeeper 3.6)
- LeetCode-380. O(1) 时间插入、删除和获取随机元素【哈希表,动态数组,随机数】
- Qt编写地图综合应用46-设备点位(添加、删除、清空、重置)
- Android Studio Module 的添加与删除
- [转] sql 删除表数据的drop、truncate和delete用法
- 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
- 试图用Session Administration删除某用户的session时报错
- Notepad++ 删除空行
- Firefly 本地签出 关闭VS 删除本地代码后 在firefly无法删除相应目录
- 为什么某些订单的参与者Participant无法被删除
- 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
- IDEA中Java项目删除Web框架后无法再次添加Web框架解决办法
- 【MATLAB】矩阵的旋转、重新排列、复制、翻转、拼接、删除行与列
- jQuery 实现添加表格行,删除行,调用日期控件
- 剑指 Offer II 021. 删除链表的倒数第 n 个结点
- 199:vue+openlayers 添加删除修改feature信息,双向不同颜色指示互动
- 130:vue+openlayers 清空删除所有的图层的有效办法(示例代码)
- git删除未跟踪文件
- spring data jpa实现数据作废(删除)功能