Extjs Grid 各种Demo】的更多相关文章

grid的一个渲染效果 Ext.define('cfWeb.view.accountSetting.OrgManageView',{ alias : 'widget.orgManageView', extend : 'Ext.panel.Panel', layout:'fit', items:[{ xtype : 'gridpanel', store : { data :[ {'orgName' : 'org1','cloudPart':'智慧城管','userOperate':'1'}, {'…
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出excel文件,返回相对路径 3.根据相对路径,下载excel文件 JS代码,按钮点击事件 /** *点击“导出”按钮触发事件 * */ onClickExport:function(btn){ // 获取表格数据 var conditionForm = btn.up('form'); var gri…
extjs grid renderer用法 摘自:http://www.cnblogs.com/ljian/archive/2011/10/27/2226959.html var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }),{ header: '', align: 'center', dataIndex: 'AccountAndRo…
解决extjs grid 不随窗口大小自适应的问题 August 30, 2010 zhai Javascript 8,403 viewsGo to comment 最近遇到的问题,在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 问题就解决了,效果图   拖大后的效果 添加的语句: Ext.EventManager.onWindowResize(function(){      grid1.getView().refresh()  }) 参看完整代码: <htm…
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页数据 以下解决方法是在工作中的碰到的.分享给大家共同学习一下. 1.首先定义一个保存选中记录的集合 2.定义选中记录的CheckboxModel 3.定义store(这个请参考) 监听beforeload 及load事件 4.在grid中引用sm…
做了一个编辑extjs grid记录的窗体,但更改数据后,怎么重新刷新grid让数据显示呢? 做了半天的尝试,其实到最后只需一句话,faint:-) this.store.reload(); 不用加任何参加都可以了:-)…
转自:https://blog.csdn.net/shancunxiaoyazhi/article/details/22156083 renderer : Function (可选的)该函数用于加工单元格的原始数据,转换成为HTML并返回给GridView进一步处理.如不指定,则对原始数据值进行默认地渲染. 例:renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ } extjs grid render…
Ext.onReady(function () { var store = Ext.create('Ext.data.Store', { fields: ['id', 'name', 'account', 'password'], pageSize: 20, remoteSort: false, remoteFilter: true, proxy: { type: 'ajax', actionMethods: { read: 'POST' }, url: h.url + '/t/100', re…
在网上查了好多资料,关于ExtJs处理操作栏的“删除”.“编辑”.“查看详细”的处理,原来项目都是这么处理: 操作栏:{ text:'操作', xtype:'actioncolumn', items : [{ icon : '../images/edit.png', tooltip : '编辑', handler:function(grid, rowIndex, colIndex){ var record = grid.getStore().getAt(rowIndex); var data =…
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就发生了,每一次翻页,其它页面的选中行就消失了.Ext 没有为我们提供内置的保持选中的支持,只有我们自己动手来实现了. 先说一下具体的思路吧:首先在页面中创建一个数组,用来存储Grid的所有选中行,然后分别处理selModel的select和unselect事件和Store的load事件. 在sele…
在使用extjs创建带分页功能的 grid 如下: 1.创建一个模型 // 创建算定义模型 模型名称 User Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone', 'birthDate'] // 加载指定的数据字段 }); 2. 创建store 来存储模型,其中 myPageSize 是默认的页面初始大小,设定为 10 // 创建 store var userStore = Ext.c…
今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下.发现ExtJs提供了一个很强的方法如下: var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }),{ header: '', align: 'center', dataIndex: 'AccountAndRoseID…
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. 首先,在column里重写renderer方法,方法里拼html语句 View里主要代码如下: columns: [{ header: 'Complex column', width: 90, renderer: function(value, cellmeta, record) { var dis…
最近因为项目问题,需要解决Extjs导出成Excel的问题. 下面简单描述这个问题解决的步骤如下: 1.先在js文件里写了一个button的handler事件,通过点击按钮,来实现调用ExportExcel(GridPanel,{store:null, title: ' '}) ExportExcel方法的源码如下: /** Execl导出方法 **/ function ExportExcel(gridPanel, config) { if (gridPanel) { var tmpStore…
celldblclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { //extjs 4.2下,有时出现,多次不连续双击某一个单元格时,取到的cellIndex不正确,解决办法如下: cellIndex = td.cellIndex; var columns = view.componentLayout.headerCt.columnManager.columns; //console.log(columns…
这个问题描述类似 关于extjs表格列展示顺序问题 明明在columns定义好了,理应按照里面的顺序输出嘛,但偏不,原本应该列在第一位的,结果忽而在最后,忽而在中间,忽忽何所似,天地一狗屎. 在谷歌里寻寻觅觅,找不到.给出的答案,大部分都是列排序问题,我靠,牛头不对马嘴. 后来尝试着将一个叫stateful的属性值改为false,就正常了: ////grid var DaipiGrid = Ext.create('Ext.grid.Panel', { id: 'DaipiGrid', rende…
extjs6 经典版 表格头部使用鼠标拖动 禁止改变列的宽度 只需要给grid 设置属性enableColumnResize:false就可以啦 xtype:'grid', enableColumnResize:false, columns:[ {text: '场景',dataIndex:'ji'}, {text: '场号',dataIndex:'num'}, {text: '页数',dataIndex:'pagenum'} ] 以上就是工作中遇到的问题,Extjs初学,大神勿喷!…
之前的项目中尽管也常常使用到extjs,但也许是没有注意到,也也许是根本就没有须要用到这个功能. 前几天在和客户讨论需求时,客户说想要可以将gird表中的数据复制出来,当时没多想,感觉这功能extjs应该是支持的,应该配置一个后几个參数就能搞定的吧.但是回来后查extjs的api才发现好像根本就没有这个设置的.再回忆之前的项目中,好像确实没有做过这个功能.所以赶紧就到网上找了,也找个来一些解决方式,但感觉实现起来比較麻烦,也没去试. 今天再想到这个问题时,突然一个想法在脑海中闪现,应该可以借用g…
原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下:   var sm = new Ext.grid.CheckboxSelectionModel({ handleMouseDown : Ext.emptyFn, singleSelect : false }); 为grid的store添加load监听如下: store.addListener('load',function(){ var records=[];//存放选中记录 fo…
Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.QuickTips.init(); function formatDate(value) { //var date = new Date(value); return value ? date.dateFormat('Y-m-d H:i:s') : ''; } var sm = new Ext.grid.CheckboxS…
new Ext.grid.CellSelectionModel({ last : false, // 上一次选中的单元格 selections : [], // 选择区缓存 handleMouseDown: function (grid, row, col, event) { var isSelected; if (event.button !== 0 || this.isLocked()) return; if (event.shiftKey && this.last !== false…
Q:  How to color the text in the grid Try: http://dev.sencha.com/playpen/docs/output/Ext.grid.TableGrid.html http://www.iteye.com/problems/19221 A: http://www.w3school.com.cn/tiy/t.asp?f=jquery_selector_class <html> <head> <script type=&quo…
表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 text : String 列的标题 默认是"" dataIndex : String 和Model的列一一对应的 sortable : true 可以整理,可以进行分类的 field: 可编辑字典配置 重要方法 getStore    返回当前页面所关联的store 重要属性 ownerCt…
http://blog.csdn.net/kunoy/article/details/7829395 /** * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] */ var mergeCells = function(grid,cols){ var arrayTr=document.getElementById(grid.getId()+"-body").firstChild.f…
直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.html <!DOCTYPE html> <html> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum…
IE下验证好使. { text: "Del", icon: 'Scripts/Ext/resources/images/icons/application_form_delete.png', action: "Del", listeners: { click: function (btn) { var grid = btn.up("grid"); var me = grid.getView(); var scrollLeft = me.el.ge…
实现grid勾选后出现编辑按钮,通过增加一个字段checked来控制 事件如下: selectionchange: function (thi, selected, eOpts) { for (var i = 0; i < selected.length; i++) { if (selected[i].data["checked"] != true) { selected[i].beginEdit(); selected[i].set("checked", t…
今天在导出EXT的二维时老是报错,追进去看是renderer : function(value)的参数不对,经过一番研究,未免以后遇到再次浪费时间,记录一下. var cm = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }), { header: '', align: 'center', dataIndex: 'AccountAndRoseI…
表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {text: '场景',dataIndex:'ji',menuDisabled:true}, {text: '场号',dataIndex:'num',menuDisabled:true}, {text: '页数',dataIndex:'pagenum',menuDisabled:true} ] 这是ex…
转自:https://kabuka.iteye.com/blog/581823 默认的 new Ext.grid.CheckboxSelectionModel 都是可以多选的,但是有时候需要控制单选时候可以 在CheckBoxSelectModel里添加参数{singleSelect:true},这样的选择模型就为单选了…