ExtJs
文章平均质量分 91
idomyway
这个作者很懒,什么都没留下…
展开
-
Extjs中Ext.data.Store的多种操作详解
前言Store是extjs中的重中之重,贴过来,备用查询操作Store.getCount()Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录。store.each()除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示。 store.each(function(record) {原创 2017-10-18 12:41:34 · 16375 阅读 · 1 评论 -
ExtJs之treePanel checkbox 复选框
需求目录树需要实现多级复选的时的应用效果图代码1.实现关键—–子节点和父节点的联动/** 递归遍历父节点 **/ var travelParentChecked = function(node, checkStatus, opts){ //父节点 var upNode = node.parentNode; if(upNode != null){原创 2017-11-25 18:58:15 · 5447 阅读 · 1 评论 -
ExtJs gridPanel添加数据
向gridPanel添加数据数据模型:Ext.define("xx.xxModel",{ extend:"Ext.data.Model", field:[ {name:'hour'}, {name:'minute'} ]})一. 当gridPanel读取的是数据库的信息时me.store = Ext.create("Ext.data.Sto原创 2017-12-14 18:53:12 · 1712 阅读 · 0 评论 -
ExtJs gridPanel实现多行选取
需求在ExtJs中使用gridPanel时,实现选取多行,并且获得其中的数据效果图如下解决在ExtJs中实现多行选择,只需要在gridPanel中配置默认属性:multiSelect:true,selModel: new Ext.selection.CheckboxModel(),获取选择的数据:var selection = this.getSelectionModel().getSelecti原创 2017-12-14 19:02:55 · 1272 阅读 · 0 评论 -
为Ext.form.Panel的xtype:label添加事件
需求在Ext.form.Panel中添加文字,并注册click事件。 实现如效果图所示的功能效果图 \核心为xtype:label添加事件 listeners: { render: function () {//渲染后添加click事件 Ext.select("#pipeSecrecyAgreement").on('click',原创 2017-11-27 18:09:57 · 2218 阅读 · 0 评论 -
ExtJS Button调用Ext.window.Window后,只能点开一次,第二次就点不开
需求Ext.window.Window定义的窗口点击打开一次之后,关闭窗口,第二次点击发布失效了。窗口无法打开解决方法:在自定义的window组件中新添加属性 closeAction : 'close',//这里写成 'hide'原创 2017-11-27 18:42:00 · 2178 阅读 · 0 评论 -
ExtJs的列模式column详解
概述列模式,就是在grid组件创建的时候,指定的列模式,我们可以将数据更好的展示和列的功能按钮扩展等。一、列模式的主类 Ext.grid.column.Column1.默认的 xtype:gridcolumn2.Ext.grid.column.Actionxtype:actioncolumn在表格中渲染一组图片按钮,并且为它赋予功能alertText:String设置应用image元素上的alt转载 2017-11-27 18:48:39 · 3771 阅读 · 0 评论 -
ExtJs actioncolumn根据grid数据动态显示按钮
需求通过不同行的不同数据状态决定进行相应的操作方法通过getClass方法可以获取到,当前行的数据,根据指定字段的值可以判断设置按钮的显示或隐藏。 return的是类名。需提前定义,在类中进行相应的背景图片以控制不用的图片控制。代码{ text: '操作', xtype: 'actioncolumn',原创 2017-11-27 18:56:08 · 2368 阅读 · 0 评论 -
ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小
需求那就是用于比较两个时间大小1.选择日期后触发事件的方法{ xtype: 'datefield', name: 'birthday', format: 'Y-m-d', hideTrigger: true, //隐藏文本框后面的图标 fieldLabel: '出生年月', listeners: { //添加日期选择事件 "select原创 2017-11-27 19:14:22 · 2994 阅读 · 0 评论 -
ExtJs gridPanel行添加操作按钮的方法
需求在gridPanel中添加操作列是非常常见的,实现如下效果 在ExtJs中有两种添加按钮的方法:一、如第二三列xtype: ‘actioncolumn’{ text: '操作2', xtype: 'actioncolumn', align:"center", width: 100, items: [ { too原创 2017-12-18 19:34:01 · 7338 阅读 · 3 评论 -
ExtJs gridPanel默认选中第一行
具体语法 MyGrid.getSelectionModel().select(0,true); 注意事项语句最好的位置选择是 Store获取数据的成功回调函数里listener:{ "load":function(){ MyGrid.getSelectionModel().select(0,true); }}原创 2017-12-27 14:25:33 · 3156 阅读 · 0 评论 -
ExtJS tbar实现组件浮动
前言最近在用ExtJs做gridPanel时tbar含有多个组件时,指导人告诉我一个实现浮动的快捷方式。非常简单且实用实现效果 实现右边三个组件右浮动实现使用 “->”代码var gridPanel = Ext.create("Ext.grid.Panel",{ wieth:"100%", //..... tbar:[ custom01,//左一panel原创 2018-01-24 20:28:36 · 1175 阅读 · 0 评论 -
extJs gridPanel进行查询后页面自动跳至查询结果后第一页
gridPanel进行查询后页面自动跳至查询结果后第一页底部显示分页工具栏时添加idbbar:Ext.create(‘Ext.PagingToolbar’,{ id:’pagingTool’, store: me.gridStore, displayInfo:true})在查询后的success函数中var pagingbar = Ext.getC原创 2017-12-21 18:43:33 · 999 阅读 · 0 评论 -
ExtJs之treePanel实例
需求treePanel适合做系统中的多级目录树(没有从后台加载数据)效果图代码Ext.define('dxgx.gxInfoTreePanel',{ extend: "Ext.tree.Panel", xtype: "nav", id: "nav", initComponent: function() { //导航菜单Store var原创 2017-11-25 18:44:00 · 491 阅读 · 0 评论 -
ExtJs之gridPanel实例
需求完整的extjs自定义实例(没有异步加载数据)效果图代码:Ext.define('dxgx.applyApprovalGrid', { extend : 'Ext.grid.Panel', requires : [''],//多继承,一般继承数据模型 columnLines: true,//列的间隔线 multiSelect: true, selModel原创 2017-11-25 15:45:51 · 400 阅读 · 0 评论 -
ExtJs 消息提示框介绍
一、javascript中的提示框在Ext.MessageBox中的展现Ext.get('btnA1').on('click', function (e) { Ext.Msg.alert('alert', '点击alert键', DemoFunc.evtAfterClick);});Ext.get('btnA2').on('click', function转载 2017-11-30 20:06:51 · 1142 阅读 · 0 评论 -
ExtJs组件的获取方式
需求ExtJs中有多种捕捉元素的方法,其中Ext.get(),Ext.select(),Ext.query()是获得的dom,不是获得的Ext定义组件。 ExtJS也有自己独特的方式查找组件。本次从全局查找、容器内查找、form表单查找、通用组件等4个方面介绍组件的查找方式。 ###目录全局查找方式容器内查找form查找子组件通用组件查找方式1. 全局查找方式全局查找方式指在整个E转载 2017-12-01 08:39:53 · 3690 阅读 · 1 评论 -
ExtJs checkbox绑定click事件实现全选
需求在ExtJs中 xtype: checkboxfield和checkbox只封装了change事件监听,而且Ext绑定的事件是基于订阅者模式的,当我们想实现如下的全部选择时,会发生不可避免的冲突这时,我们只需要单纯的点击触发事件代码点击触发事件listeners:{ afterrender:function(obj){ obj.getEl().dom.onclic原创 2017-12-10 16:25:40 · 6705 阅读 · 0 评论 -
ExtJs之结构树 Ext.tree.panel详细用法
1.简单的树效果图代码[javascript] view plain copyprint?"text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';转载 2017-12-10 16:33:47 · 18389 阅读 · 0 评论 -
ExtJs 和后台数据的交互方式
1.数据源storestore通常是作为grid,tree…的数据源,以便来更新数据.其实这也是它最正规的用法,但其也可以把它作为与后台交互的一种方法,前提是只需向后台发送数据,而不需要接收后台返回的数据. 创建一个公共的store,不与任何表有联系,只需要下面简单的几句话 var publicstore = Ext.create('Ext.data.Store', {转载 2017-12-10 22:10:32 · 4969 阅读 · 0 评论 -
ExtJs xtype的使用
xtype可作为Ext控件的简写,都会对应一个Ext控件。当然这里你也可以自定义这个xtype,通过自定义的Ext控件来绑定,主要由Ext.reg方法去注册xtype。我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件,比如在面板的 items 属性中,尤其是多个组件或需要写许多的 ExtJs 相关代码时就更值得推荐。 两种形转载 2017-12-10 22:52:53 · 7869 阅读 · 1 评论 -
ExtJs常用控件属性
Ext.form.TimeField: 配置项: maxValue:列表中允许的最大时间 maxText:当时间大于最大值时的错误提示信息 minValue:列表中允许的最小时间 minText:当时间小于最小值时的错误提示信息 increment:两个相邻选项间转载 2017-11-30 19:59:56 · 1085 阅读 · 0 评论 -
ExtJs之获取dom元素
需求用ExtJs获取DOM元素,以附加事件等操作。核心ExtJs中会有三类基本对象 htmlelement , Ext.Element和CompositeElement 。分别解释一下:htmlelement指html页面的各种标记元素,可以用document.getElementById()获得,具有html对象的方法和属性。Ext.Element是最重要的EXT对象,在dom对象的基础上,又包原创 2017-11-27 18:37:07 · 1668 阅读 · 0 评论 -
ExtJs gridPanel 显示查询无数据
需求当Ext.grid.Panel中没有查询到数据时,gridPanel中默认没有提示(不是弹出框的那种),在ExtJs中gridPanel封装了viewConfig属性,可以在gridPanel中没有数据的时候默认显示提示效果图代码viewConfig:{ forceFit:false, emptyText:'<div style='text-align:center;paddin原创 2017-12-12 20:19:12 · 1679 阅读 · 0 评论 -
ExtJS ComboBox 下拉列表详细用法
原文转自起飞网:http://www.qeefee.com/article/000171ComboBox 是ExtJS中经常用到的控件,今天我们来讲一下它的一些用法。使用本地StoreComboBox需要结合Store一起使用,下面是一个最简单的例子,结合本地的Store的用法:var genderStore = Ext.create("Ext.data.S转载 2017-11-25 11:26:06 · 1148 阅读 · 0 评论 -
Extjs之FormPanel布局
FormPanel有两种布局:form和column。 form是纵向布局,column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现。 如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:落实到任何一个表单组件后,最后总是form布局defaultType属性不一定转载 2017-12-04 22:44:35 · 2736 阅读 · 0 评论 -
ExtJs之gridPanel
需求Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行展示、选择、编辑等创建gridPanel的步骤1.定义数据模型Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'st原创 2017-11-25 15:21:27 · 453 阅读 · 0 评论 -
ExtJs常用layout布局整理
前言 ExtJs常见的布局方式有:border 、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 这些布局可以快速的帮助我们进行网页搭建 ...转载 2018-08-11 16:46:23 · 1014 阅读 · 0 评论