Extjs实现Grid表格显示【一】

Ext.onReady(function(){ // Ext.Msg.alert("提示","hello world!! "); var stu =new Ext.data.JsonStore({ data:[ {"schoolNo":"10001","name":"wind","sex":"1","age":"28&…

//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { var USED_AMOUNT_ = 0; for (var i = 0; i < matMonthPlanHisList.length; i++) { if(matMonthPlanHisList[i].MAT_NO_ == record.get('MAT_NO_')){ USED_AMOUNT_…

[ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是前端导出,不涉及后端. 源代码打包下载将源代码嵌入到应用中查看导出按钮以及导出效果扩展支持sum统计和groupsum分组源代码打包下载本次使用的是github上的一个开源项目Exporter 下载地址:https://github.com/iwiznia…

[ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel

继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录本文目录 poi项目下载及加载 extjs前端导出设置 extjs后台对应的解决方案创建excel工作簿创建一个excel页签生成excel样式并初始化产生表格标题行build headers 构造数据行build rows poi项目下载及加载 POI项目是apache官网的一个开源项目,其主要…

Extjs中grid表格中去掉红三角

在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空有的时候在保存数据时如果不刷新页面也会留下红三角,那么在创建grid的时候,在grid里面加上下面的语句就不会再出现了: viewConfig: { markDirty: false } 下面是grid的例子: var haomlTongjGeimjGrid = Ext.create('Ext.grid.Panel', {…

Extjs中grid前端分页使用PagingMemoryProxy【二】

在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码贴出来大家一起相互学习下. 在项目中时常会用到前端分页的效果,使用grid来进行分页, 在源代码中\examples\ux\data\PagingMemoryProxy.js,此时要使用该js文件,在项目引用该文件. <script type="text/javascript" sr…

学习ExtJS的grid布局

这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. [学习资料](ExtJS4中的Grid.Tree.Form)http://www.cnblogs.com/niejunchan/p/4998512.html [效果] Array_Grid Tree_Grid [代码] [Array_Grid的代码] <!DOCTYPE html> <htm…

Extjs 3 Grid相关操作

extjs gridpanel 操作行得到选中行的列 var model = grid.getSelectionModel(); model.selectAll(); //选择所有行 model.selectFirstRow(); //选择第一行 model.selectLastRow([flag]); //选择最后一行,flag为正的话保持当前已经选中的行数,不填则默认false model.selectNext(); //选择下一行 model.selectPrevious(); …

extjs中grid对于其中表单的表头的读取以及是否隐藏的判断

//获取grid的表头信息 var columns=baseGrid.columns; alert(columns.length); //判断列是否隐藏并输出表头名 Ext.each(columns,function(column){ if(!column.isHidden()){ alert(column.text);…

NSS_04 extjs中grid接收datetime类型参数列

今天在做用户列表时发现, asp.net mvc3的控制器在返回JsonResult结果时, 会把对象内的DateTime类型成员,解析为类似于\/Date(1238606590509)\/的格式 , 导致在页面上解析不了, 显示空白. 在网上搜索了一下,这种格式好像是计算从1970.1.1到现在的毫秒数, 为了带宽啥的设计的通用格式. 网上发现大部分解决方案为重写Controller的JsonResult, 看到这种网页就直接关掉, 绝对是走岔路了,微软不会搞个客户端解析不了的格式嘛. 在客…

Extjs中grid行的上移和下移

一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加样式iconCls disabled : true, handler : function() { var record = grid.getSelectionModel().getSelected(); if (record) { var index = grid.store.indexOf(re…

extjs中grid中行内文本或图片居中显示

我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body" class="x-panel-body x-grid-body x-panel-body-default-framed x-panel-body-default-framed x-layout-fit" style="border-top-width: 1px; bo…

Extjs入门-grid

function rowdblclickFn(grid, rowIndex, e){//双击事件 var row = grid.store.getById(grid.store.data.items[rowIndex].id); alert(row.get("unitcode")); } grid.addListener('rowdblclick', rowdblclickFn); Ext2.0是一个javascrip…

ExtJS：Grid数据导出至excel实例

导出函数ExportExcel() var config={ store: alldataStore, title: '测试标题' }; var tab=tabPanel.getActiveTab();//当前活动状态的Panel ExportExcel(tab,config);//调用导出函数 ExportGridToExcel.js var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi…

Extjs 解决grid分页bug问题

//从后端获取数据加载到grid中var mainStore = new HeJsonStore({ url:'xxx', autoLoad:true, pageSize:20 }) //此方法最好放到通用js里面 function HeJsonStore(options){ var storeOpts={}; Ext.apply(storeOpts,options); storOpts.poxy={ type:'ajax', url:options.url, actionMethods:{re…

Extjs 在Grid单元中格添加Tooltip提示

Grid 中的单元格添加Tooltip 的效果 Ext.QuickTips.init(); //必须要… columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone', renderer:function (value, metaData, record, rowIdx, colIdx, stor…

Extjs 改变grid行的背景颜色

## Ext grid 改变行背景色 Ext.util.CSS.createStyleSheet('.ts {background:#9a9a9bc2;}');//单独创建css样式 { xtype: 'gridbase', region: 'north', title: '不含增值税(单位:万元)', titleAlign: "center", dockedItems: [ { xtype: 'toolbar', weight: -10, items: [ { xtype: 'myb…

Extjs中grid 的ColumnModel 属性配置

一, 用数组的方式配置ColumnModel var colModel = new Ext.grid.ColumnModel([ { header:'编号', dataIndex:'id',width:200}, { header:'名称', dataIndex:'name',width:300} ]}; 注意:上述写法ColumnModel的构造参数必须是一个数组,哪怕只有一列. 二. 用JSON对象的方式配置ColumnModel var colModel = new Ext.grid.Co…

Extjs的grid的单元格中加载超链接和按钮

效果: 户型图列显示的图片实际上就是一个超链接. 添加一个Button分2个步骤:1.在列头中定义超链接列或者Button列的HTML代码,也就是Render 2.添加该Button的事件处理函数.其中,gridPanel应作为参数传入该函数. 应该在gridPanel初始化时定义: (1)cellClick的listener:cellClick (2)cellClick事件的处理函数:onCellClick 列头定义的代码如下: var cm = new Ext.grid.ColumnMode…

ExtJS获取Grid的行数

1. grid.getSelectionModel().getCount() ; // 获得当前选中的行数 2. grid.getStore().getTotalCount(); // 获得记录总数 3. grid.getStore().getCount(); // 获得当前页的记录总数…

Extjs Ext.grid.column.Column 隐藏显示列

1.根据字段名字 grid.down("gridcolumn[dataIndex=PLAN_QTY]").show();//hide() 2.根据列号 grid.columns[1].hide();…

Extjs Ext.grid.column.Column 自适应内容

var griddb = Ext.ComponentQuery.query("Ali_DeliveryAuthorityList"); griddb = griddb[griddb.length - 1]; var store = Ext.getStore("DeliveryAuthorityStore"); store.proxy.extraParams = obj; store.loadPage(1 , { scope: this, callback: func…

64. Extjs中grid 的ColumnModel 属性配置

转自:https://blog.csdn.net/u011530389/article/details/45821945 本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型,其配置项是一个由“列定义”组成的数组,还可以是JSON组成的对象.其中也定义很多操作列的属性.方法比如:查找某个列,隐藏某个列等等. 一, 用数组的方式配置ColumnModel var colModel = new Ext.grid.ColumnModel([ { header:'编号', da…

ExtJS用Grid显示数据后如何自动选取第一条记录

用Grid显示数据后,如何让系统自动选取第一条记录呢?在显示Grid时由于其Store正在loading,没法在Grid选取第一条记录,因为还没有记录,所以应在其Store进行操作. 查看Ext.data.Store的load()方法如下: load( [options] )Loads data into the Store via the configured proxy. This uses the Proxy to make an asynchronous call to whatever…

Extjs更新grid

基于Extjs4.2 原理是创建一个新的store,来覆盖原有的store. //创建数据 var newdatas = { name: "ly", age: 17, adress: "成功" }; //创建store,导入数据 var newStore = Ext.create('Ext.data.Store', { storeId: 'newData', fields: ['name', 'age', 'adress'],//表示在图标上展示的信息 data:…

NSS_07 extjs中grid在工具条上的查询

碰到的每个问题, 我都会记下走过的弯路,尽量回忆白天的开发过程, 尽量完整, 以使自己以后可以避开这些弯路. 这个问题在系统中应用得比较多, 在一个gridpanel的工具条上有俩搜索框, panel加载和工具条查询按钮查询的功能.主要涉及store的filter功能. 客户端的filter 在stoer load前,先clearFilter(因为在每点一次查询, filter项中就会多一组查询条件, 导致查询有误), 然后stoer.filter[{property: '',value''},…

Extjs中grid表头内容居中

在每一列中加上header属性即可,源码: header:'<div style=" text-align: center; vertical-align: middle;">天气现象</div>' sortable : align : 'center'…

ExtJs 给grid某一单元格重新赋值

// 司机,搬运工提成 var commissionMoney = (waybillsFtQty * commissionMoneyRatio / personCount).toFixed(2); // 重置配载列表司机与帮运工提成 for (var i = 0; i < planGrid.getStore().getCount(); i++) { var record = planGrid.getStore().getAt(i); record.set('commissionMoney',co…

ExtJS扩展：扩展grid

ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所有的代码和例子都在我的github上:ExtJsExtend 开始之前在开始之前,我们先来扩展ExtJs的container容器. 在ExtJs中,可以通过给组件分配一个id来标识它,id是一个全局的唯一的标识,然后通过Ext.getCmp(id)来获取这个组件,看起来很方便,但是在单页应用中,给…

extjs学习（关于grid）

1.想要调整某一列在表格中的顺序,可以使用mapping(索引是从0开始的) var store = new Ext.data.ArrayStore({ data:data, fields:[ {name:'id',mapping:1}, {name:'name',mapping:0}, {name:'descn',mapping:2} ]} ); 2.想让表格拥有斑马线的效果:加上stripeRows:true(默认为false) var grid = Ext.create('Ext.grid…