首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Extjs:如何使用ajax的响应数据为actioncolumn设置iconCls

Extjs是一种基于JavaScript的前端开发框架,它提供了丰富的组件和工具,用于构建现代化的Web应用程序。在Extjs中,可以使用ajax来进行异步数据请求,并根据响应数据来设置actioncolumn的iconCls属性。

要使用ajax的响应数据为actioncolumn设置iconCls,可以按照以下步骤进行操作:

  1. 首先,需要在Extjs中创建一个actioncolumn列,该列用于显示操作按钮或图标。
代码语言:txt
复制
{
    xtype: 'actioncolumn',
    dataIndex: 'status',
    items: [{
        getClass: function(value, metaData, record) {
            // 在这里根据ajax的响应数据设置iconCls
            if (record.get('status') === 'success') {
                return 'icon-success';
            } else {
                return 'icon-failure';
            }
        },
        handler: function(grid, rowIndex, colIndex) {
            // 点击操作按钮的处理函数
            // ...
        }
    }]
}
  1. 在getClass函数中,可以根据ajax的响应数据来设置iconCls属性。假设ajax请求返回的数据为response,可以通过response中的某个字段来判断状态,并根据状态设置不同的iconCls。
  2. 在返回的iconCls中,可以使用自定义的CSS类名来设置图标样式。可以在CSS文件中定义这些样式,或者使用Extjs提供的内置图标样式。

这样,当ajax请求返回数据后,actioncolumn列中的图标将根据响应数据的状态而改变。

关于Extjs的更多信息和使用方法,可以参考腾讯云的Extjs产品介绍页面:腾讯云Extjs产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ExtJS4预览:渲染过程重构和标准化

在过去四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4之前渲染组件没有标准方式。...在页面上表格经常被用作模板来构建他们标记。 ExtJS4,我们目标是统一这些方法一个标准方法,那就是XTemplate和DomQuery。...这个标准允许开发者很容易针对弹性需求构建出强健组件。这个标准将在所有我们组件中使用。...XTemplate数据将从renderData对象读取,并且生成元素可以通过组件实例renderSelectors属性访问。...renderSelectors作用域是基于base div元素并且可以使用标准css选择器。这些元素引用是组件生命周期一部分,并且将在组件销毁时被自动移除。

1K100

【网安学术】基于ExtJSV**管理系统设计与实现

ExtJS作为Ajax框架优秀代表之一,应运而生。如今,一些主流V**开发商提供管理系统界面,或多或少都运用了Ajax技术。...基于此,满足客户需求、提升用户体验,配网主站端V**管理系统就采用了基于ExtJS框架开发路线。...1年后,他正式将Ext更名为ExtJS。经过6年发展,ExtJS已优化更新到现如今4.1.1版本,功能日益强大,使用范围也越来越广。...用户在登录界面输入正确用户名和登录口令,验证通过后,系统再根据其所赋予权限进行判断,给出相应可操作界面。系统登录设计基于ExtJS界面框架、采用Ajax技术进行数据交互。...如此,这将大大提高ExtJS在IE下性能,使得网页响应变快,IE对其兼容性变强。 3.3 数据实现 后台数据库采用SQLite软件存储数据

1K10

Extjs-lesson3

方法」: show :窗口显示 hide :窗口隐藏 close :窗口关闭 1.4 学习方法 学习方法就是通过官方 API 文档,上篇文章介绍了使用方法,下面再提供一副图片详细介绍每个类说明如何查看...,则使用自定义圆形边框渲染面板,如果false,则使用纯1px正方形边框渲染(默认为false)。...,字段与数据一一对应解释 Extjs 使用数据 // 参数 id 列,以及其他各个字段名称 reader: new Ext.data.ArrayReader({ id:...body 标签中显示 renderTo: document.body, // 如果True,则使用自定义圆形边框渲染面板,如果false,则使用纯1px正方形边框渲染(默认为...{ text: "根下节点一[user图标]", leaf: true, // ExtJs自带图标显示“文件夹”或是“列表”,通过 iconCls

1.4K20

Extjs4.2+webAPI+EF实现分页以及webapi数据传值

由于不明白分页总数是怎么计算,不知道他分页方式所以花费了好多功夫,现在弄出来了与大家分享下 1.首先是EF简历,想必大家都清楚:添加-〉新建项-〉数据-〉Ado。...net实体数据模型 2.就是后台数据也就是apiController,前台需要两个数据,一个是数据总条数,第二个是要查询分页数据 所以我们要建立一个实体,用于返回数据传送,由于多个页面都使用,多以用到了泛型...,那么就开始Extjs部分了 4.Extjs部分我就直接上代码了 Ext.require([ '*', 'Ext.toolbar.Paging', 'Scripts.*' ]) Ext.onReady...totalProperty: 'TotolRecord' }, 检测后台传过来数据,分页数据对应是Data键值对,数据数据条数 TotolRecord...这里面还设计了webaip传值接受问题,可以参考 webapi下如何传值

1K40

基于QTwebkit与ExtJs开发CBS结构企业应用管理系统

窗口将不具有标题栏和边框,至于如何ExtJs来渲染标题栏,以及如何实现标题栏最小化及关闭等功能,将在后续小节讲述。   ...所有的浏览器把请求响应分为两类,一类是浏览器可以解析(Html文本),另一类是浏览器无法解析(文件),常见浏览器遇到无法解析文件,往往会下载到本地给用户使用,要想让QWebView支持下载,就必须截获浏览器...3.定制AJAX请求基址     模块加载机制可以通过设置appFolder基路径来解决,但是对于业务JS代码随处可见AJAX请求该如何处理呢?...确实,AJAX请求也会面临这种问题,而且更为突出。因为在ExtJs中对AJAX请求做了很多封装:proxy、store、request、load等,随处可见ajax身影。...在ExtJs中所有Ajax请求都离不开Ext.data.Connection类支撑,我们可以使用ExtJs提供观察者模式来注册Ext.data.Connection类beforerequest事件

3.3K80

easyjsp增删改查在一个jsp页面上

Ⅳ:使用ajax方法调用后台接口 使用ajax方法调用后台接口大致分为 壹:type 请求方式  贰:url 请求路径  叁:data 请求数据  肆:async 是否异步  伍:Content-Type...(内容类型),一般是指网页中存在 Content-Type  陆:processData 默认为true,当设置true时候,jquery ajax 提交时候不会序列化 data,而是直接使用data...③先用ajax调用后台根据id查询销售合同列表信息方法    success:function(data){}            根据修改表格中每一行数据id每一行设置值               ...Ⅳ:修改时候需要把id  set进去   Ⅴ:使用ajax方法调用后台接口大致分为 壹:type 请求方式  贰:url 请求路径  叁:data 请求数据  肆:async 是否异步  伍...:Content-Type(内容类型),一般是指网页中存在 Content-Type  陆:processData 默认为true,当设置true时候,jquery ajax 提交时候不会序列化

4.6K20

extjs7 store重新加载导致异常Uncaught TypeError: Cannot read properties of null (reading ‘focus‘)解决

版本 7.4.0 classic 现象 grid/treegrid使用actioncolumn或其他能获得焦点单元格元素交互后,刷新store,如果操作目标行不在新数据中(例如actioncolumn..._dc=1640829487430:121) 解决 删除操作提交成功后,使用store.remove(recordRemoved)将已删除数据从store中移出,如有需要(远端分页查询场景)在执行store.load...() 源码分析 load后会根据此前焦点行记录重新定位焦点 但是记录已经不存在,源码没有重新校验导致定位焦点异常 ext-classic/src/view/Table.js /** * *...activeEl).is(me.getCellSelector())) { // Row to return focus to. // 此处会获取到此前操作焦点行记录...null out position, so that we do not navigate // to that cell below. // See EXTJS

1.6K50

web中树形结构【小结】

ExtJS是一个用 javascript编写,与后台技术无关前端 ajax框架。因此,可以把 ExtJS用在.Net、Java、Php等各种开发语言开发应用中。         ...应用 extjs需要在页面中引入 extjs样式及 extjs库文件,样式文件resources/css/ext-all.css,extjs js库文件主要包含两个,adapter/ext/ext-base.js...因此,要使用 ExtJS框架页面中一般包括下面几句: <linkhref=".....Chrome等浏览器; 2) 在一个页面内可同时生成多个Tree实例; 3) 支持 JSON<em>数据</em>; 4) 支持一次性静态生成和<em>Ajax</em>异步加载两种方式; 5) 支持多种事件<em>响应</em>及反馈; 6) 支持Tree...属性 3) 无子节点<em>的</em>父节点,请<em>设置</em> treeNode.isParent属性 4、异步树 在实际应用中,这种简单<em>的</em>树形结构是无法满足我们开发需求<em>的</em>,因此,我们需要从<em>数据</em>库中提取<em>数据</em>组成树形结构,这是我们就涉及到了异步树

3.4K20

day54_BOS项目_06

今天内容安排: 1、业务受理环节分析 2、创建业务受理环节对应数据表(业务通知单、工单、工作单) 3、实现业务受理、自动分单 4、数据网格datagrid编辑功能使用 5、基于数据网格datagrid...第三步:我们根据 建表文件 bos_qp.sql使用 Navicat for MySQL 生成对应表,生成:qp_noticebill(业务通知单)、qp_workbill(工单)、qp_workordermanage...ajax请求,返回是json数据,解析也是json数据,所以返回是"none"         // 如果返回是"list",就是说我们查询到结果变成HTML页面,我用解析json数据方式根本解析不出来啊...datagrid 编辑功能使用 列(Column)属性:数据网格(DataGrid) 列(Column)是一个数组对象,它每个元素也是一个数组。...4、基于数据网格datagrid 编辑功能实现工作单快速录入功能 第一步:在quickworkorder.jsp页面中增加发送ajax请求,提交当前结束编辑行数据到服务器,完成保存操作代码,如下:

2.3K20

ExtJs学习笔记(20)-利用ExtJsAjax与服务端WCF交互

相信不少人会心动),不仅组件丰富,效果漂亮,而且ExtJs集成Ajax功能可以方便与.NetWCF进行交互....这里我们将演示ExtJsFormPanel从WCF加载数据,以及如何提交数据到WCF服务端 1.首先来定义一个用于传输信息Class(实际开发中,可以是Linq to SqlClass或任何可序列化实体类...交互方法(初次接触Ajax与WCF交互同志,建议参考一下老张"Ajax与WCF交互-WCF之美(http://www.cnblogs.com/jillzhang/archive/2008/06/13...获取WCF端数据,SaveMyData,SaveMyData2用来保存ExtJs提交过来数据,区别是SaveMyData用于Get方法,SaveMyData2用于Post方法 需要说明是[WebInvoke...Ajax对象完成与WCF交互(初次接触ExtJs Ajax,可参见ExtJs学习笔记(5)_Ajax示例https://cloud.tencent.com/developer/article/1026518

94670

EasyUI学习笔记

jQuery EasyUI我们提供了大多数UI控件使用, 如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。...href:从远程加载内容 cache boolean 如果true,在超链接载入时缓存面板内容。 loadingMessage string 在加载远程数据时候在面板内显示一条消息。 <!...fn大多都是以on开头,大部分复杂组件,都可以在初始化时,使用onxxx属性配置,值事件响应 onCollapse 折叠是触发 onExpand 展开时触发 小部分简单组件,还是使用JQuery...常用属性: plain boolean true时显示简洁效果。 iconCls string 显示在按钮文字左侧图标(16x16)CSS类ID <!...它内容也可以被定义静态html或要么通过ajax动态加载。 常用属性: draggable boolean 定义是否能够拖拽窗口。

10.3K30

ExtJs学习笔记(2)_Basic GridPanel

这一节,将学习如何使用网络上最常见UI控件_Grid 1.静态示例: 静态示例其实官方下载包里,就有sample,这里只贴出代码,后面的如何跟WCF结合,做出动态版Grid才是本文重点 <!...,默认情况下linq to sql设计器生成T_Class类里,是不支持序列化ExtJs调用时无法正确序列成JSON字符串,需要手动在类前加上数据契约 [DataContract],在属性前加上[...项目的命名空间,因各自项目实际情况而异)      <enableWebScript.../GetClsData"这样url来访问 b.Extjs调用前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="02.Grid.aspx.cs...2.WCF<em>的</em>服务端方法,必须<em>设置</em>成JSON格式,另外Method<em>设置</em><em>为</em>GET,否则运行时,前端页面读不出<em>数据</em> 3.如果<em>设置</em>了autoExpandColumn,则autoExpandColumn对应<em>的</em>列

1.7K90

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券