![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ExtJS4
文章平均质量分 93
祥灬子
命是弱者的借口,运是强者的谦辞!!
展开
-
ExtJS4 组件收缩
效果图:Ext.define('V5.test.view.Viewport', {extend : 'Ext.container.Viewport',layout : 'border',requires : ['V5.test.view.Tview'],items : [{split : true,collapsible : true,hideCollaps原创 2016-08-29 15:31:42 · 1122 阅读 · 0 评论 -
ExtJS form表单控件创建
2 3 4 5 6 7 8 9 10 11 12 .x-form-unit 13 { 14 height: 22px; 15 line-height: 22px; 16转载 2016-08-08 10:46:43 · 2499 阅读 · 0 评论 -
ExtJS4 TreePanel简单实现
Ext.define('V5.cxb.view.Tree', {extend : 'Ext.tree.Panel',xtype : 'tree',width:200,height:300,useArrows:true,rootVisible:true,store:Ext.create('Ext.data.TreeStore', {root:{id:'root',原创 2016-08-11 10:38:24 · 989 阅读 · 0 评论 -
ExtJS4 grid合并单元格
Ext.define('V5.cxb.controller.Cxb', {extend : 'Ext.app.Controller',models : ['V5.cxb.model.Cxb'],stores : [],views : ['V5.cxb.view.Grid'],refs : [{ref:'Grid',selector:'cxbGrid'}],原创 2016-08-11 12:11:46 · 2707 阅读 · 0 评论 -
ExtJS4 树节点checkbox选中问题
效果图:listeners:{//监听复选框的选中属性改变事件checkchange:function(node,checked){//展开该节点下所有分支node.expand(true,true);//判断当前节点是否为叶子节点var isLeaf = node.isLeaf();if(!isLeaf){//cascade是指从当前节点node开始逐原创 2016-08-11 17:41:42 · 1999 阅读 · 0 评论 -
ExtJS4 grid单元格悬浮提示
{header : "选样方法",dataIndex : 'name3',renderer: function(value, metaData, data) {var cname = value;//判断文本长度,当超过一定值时,改变现实内容if(cname.length > 7){metaData.tdAttr = 'data-qtip="'+value+'"';原创 2016-08-23 16:36:21 · 1520 阅读 · 1 评论 -
ExtJS4 表单横向布局
效果图:源码:var win = Ext.create("Ext.window.Window", {title: "审计底稿",width: 700,height: 600,items: {xtype: "form",margin: 5,height:560,border: true,items:[{layout:'column',fra原创 2016-08-12 10:03:42 · 2847 阅读 · 0 评论 -
ExtJS4 grid添加按钮列
效果:源码:store:Ext.create('Ext.data.Store', { fields: ["name1", "name2",'name3'], data:[ {'name1':'印章管理','name2':'方学星'}, {'name原创 2016-08-12 10:12:20 · 3846 阅读 · 0 评论 -
ExtJS4 tree右键菜单
效果图:源码:init : function() {var me = this;this.control({'cxbGrid button' : {click : me.doAction},'tree button':{click:me.doAdd},'tree':{itemcontextmenu:me.doEdit}});},原创 2016-08-12 10:52:39 · 1774 阅读 · 0 评论 -
ExtJS4 combobox下拉框实现
效果图:源码:{xtype: "combobox", padding:10, fieldLabel: "类别* ",allowBlank: false,displayField:'value',valueField:'name',emptyText:'--请选择--',store:Ext.create('Ext.data.Store',{fie原创 2016-08-12 21:55:06 · 703 阅读 · 0 评论 -
ExtJS4 grid复选框只有点击复选框才能选中
selModel : Ext.create('Ext.selection.CheckboxModel', {mode : "SIMPLE",checkOnly:true,width : 100}),原创 2016-08-26 14:43:00 · 1963 阅读 · 1 评论 -
ExtJS4 grid表头分层并赋值
效果图:Ext.define('V5.cxb.view.Grid', {extend : 'Ext.grid.Panel',columnLines : true,xtype : 'cxbGrid',border : 0,id : 'cxb',views : ['V5.cxb.view.DgEdit'],requires : ['V5.cxb.view.DgE原创 2016-08-26 14:49:37 · 1927 阅读 · 0 评论 -
ExtJS4 组件缩放
效果图: {xtype : 'form',region : 'center',layout : {type : 'accordion',titleCollapse : false,animate : true,activeOnTop : false},flex : 2,items : [{xtype : 'grid',frame : fa原创 2016-08-26 17:51:15 · 887 阅读 · 0 评论 -
在extjs 4,使用combox的store的filter,但是第一次始终不起作用,第二次开始正常。
添加代码:queryMode: 'local', triggerAction: 'all', lastQuery: ''原创 2016-11-05 16:29:38 · 1033 阅读 · 1 评论 -
ExtJS4-页面控件(Form表单)
Ext.form.Panel 说明:Form fields包括:hiddenfield,displayfield,textfield,textareafield,filefield,timefield,datefield,combobox,numberfield,checkboxfield,radiofield,multislider,sliderfield示例:<script type="tex原创 2016-12-16 13:02:51 · 2021 阅读 · 0 评论 -
ExtJS4 toolbar布局
效果图:tbar : ['->',{xtype : 'combobox',displayField : 'value',valueField : 'name',emptyText : '--请选择--',store : Ext.create('Ext.data.Store', {fields : ['name', 'value'],data : [{原创 2016-08-17 16:14:15 · 334 阅读 · 0 评论 -
ExtJS4 form组件收缩
效果图添加属性:collapsibleExt.define('V5.projectinfo.view.Left', {extend : 'Ext.form.Panel',collapsible: true,columnLines : true,views : ['V5.projectinfo.view.ProjectTree','V5.projectinfo.vi原创 2016-08-17 11:17:54 · 667 阅读 · 0 评论 -
ExtJS4 Toolbar添加与事件监听
效果图:Ext.define('V5.cxb.view.MainView', {extend : 'Ext.Panel',columnLines : true,xtype : 'mainview',tbar : [{width:100,text : '首页'}, {xtype : 'splitbutton',width:100,text :原创 2016-08-16 10:18:59 · 2544 阅读 · 0 评论 -
EXTJS4控制器Controller详解
控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件(通常对view),并采取一些action。下面是我们如何创建一个Controller来管理用户:1Ext.define('MyApp.controller.Users', {2 extend:'Ext.a转载 2016-07-13 16:05:44 · 6569 阅读 · 0 评论 -
ExtJS学习:MVC模式案例(一)
ExtJS是一种主要用于创建前端用户界面的ajax框架。相比于传统的WEB开发,ExtJS更适合做企业级的系统应用。ExtJS框架不但功能强大,由于其省去了不少的前端开发工作,其开发速度也是快的惊人,所以目前有很多的WEB开发者更愿意用它开发企业内部的系统。 由上图可知,网页的布局有三部分组成:顶部标题、左侧菜单和右侧主题内容显示。这里我们对案例的布局有个初步印象,方便今后我们的进一步学习。转载 2016-07-14 09:40:06 · 660 阅读 · 0 评论 -
ExtJS学习:MVC模式案例(二)
到目前为止我们现有的文件只有根目录下的index.html和app.js两个文件,不具有任何的实际意义。下面我们开始着手创建我们的项目,让它能够实实在在的展现在我们的浏览器中。首先,我们在根目录下创建app文件夹,然后在app文件夹下创建controller和view两个文件夹,分别存放我们的控制器文件和视图文件。定义ViewPort VeiwPort代表整个浏览转载 2016-07-14 09:47:30 · 304 阅读 · 0 评论 -
ExtJS学习:MVC模式案例(三)
在ExtJS MVC案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网页的基本布局。这一讲使我们系列教程的第三讲,主要实现网页左侧的树形菜单部分,希望对入门级的WEB开发者提供一个引导的作用。 到目前为止,我们的文件结构如下图:接转载 2016-07-14 09:59:27 · 415 阅读 · 0 评论 -
ExtJS学习:MVC模式案例(五)
到目前为止,我们ExtJS MVC案例系列教程已经进行了四讲,在这四讲中我们通过ExtJS的MVC模式实现了网页的布局以及页面的切换功能。今天我们主要实现右键菜单的功能,这也是我们整个案例教程的最后一讲,由于ITLee也是ExtJS的初雪者,写这些文章对那些有过ExtJS开发经验的人来说并没有什么实际意义,主要是希望对ExtJS的初学者起到抛砖引玉的作用。 要实现右键菜单的功能,转载 2016-07-14 10:13:40 · 486 阅读 · 0 评论 -
ExtJs中Store的种类
store是一个为Ext器件提供record对象的存储容器,每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例,下面介绍ExtJs中Store的用法一、什么storeStore类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,Gr转载 2016-07-15 14:26:03 · 2845 阅读 · 2 评论 -
Extjs的Requiers作用
有的时候项目中要写一些扩展组件,随着扩展组件的增加,会造成有的页面需要使用,而有的页面不需要使用的问题,这对组件的js文件的引用造成了烦恼:如果每个页面都去引用的时候会造成浏览器打开页面的流量的增加而影响资源,如果需要的时候引用管理起来又很麻烦,Extjs4.0帮我们解决了这个问题,那就是Ext.requires。它可以实现根据我们的需要动态加载所需要的组件文件,很灵活也很方便。下面我们用例子进行转载 2016-07-17 23:10:48 · 607 阅读 · 0 评论 -
ExtJS4-客户端代理
代理(proxy)是用来加载和存取Model 数据的。在开发过程中,我们一般不会直接操作代理,它会很好的配合Store 完成工作,所以在本节内容中,我们主要讲解各种proxy的用法。代理(proxy)分为两大类:客户端代理和服务器端代理。客户端代理主要完成与浏览器本地存取数据相关的工作,服务器端代理则是通过发送请求,从服务器端获取数据。根据各自获取数据的方式,客户端代理和服务器端代理又可以原创 2016-07-18 09:20:04 · 239 阅读 · 0 评论 -
ExtJS-服务器代理
在上一节我们介绍了客户端的几种代理,本节的主要内容是介绍如何使用服务器端代理,将重点介绍AjaxProxy,这是我们最常用的代理方式。Ajaxweb应用程序开发过程中,与服务器端交互的技术最常用的就是Ajax了。Ajax 是使用Javascript创建一个HttpRequest,采用异步的方式从服务器获取数据。我们先看一个简单的示例:Ext.onReady(functi转载 2016-07-18 09:32:53 · 252 阅读 · 0 评论 -
ExtJS4-Ext.Direct
在上一节中,我们介绍了ExtJS 中的服务器段数据代理,在介绍到Direct 代理的时候,我们提到了Ext.Direct。这一节我们将重点介绍Ext.Direct的具体用法,并对上一节中Direct代理进行补充。Ext.Direct 提供了一种使用Javascript 调用服务器端方法的机制,它与服务器端技术无关,因此可以在php、java、.net 等众多平台中使用该技术。我们本转载 2016-07-18 10:01:12 · 377 阅读 · 0 评论 -
ExtJS4-布局系统详解
今天我们来对ExtJS 4.2 的布局(Layout)进行一次系统的学习。在ExtJS 4.2中,提供了十几种布局,我们可以在api中看到:在这些布局中,我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。Anchor LayoutAnchor布局将使组件固定于父容器的某一个位置,使用ancho转载 2016-07-18 10:13:56 · 482 阅读 · 0 评论 -
ExtJS-bootstrap.js的工作方式
我们将bootstrap.js引入页面,并没有直接引用ExtJS的脚本文件,而是通过bootstrap在启动的时候动态的选择要将哪些extjs脚本添加到页面中。在本文中我们来介绍一下bootstrap.js的工作方式。打开开发人员工具之后,点击Network标签,然后刷新页面,这时我们就跟踪到了所有文件的请求:可以看到,尽管我们没有在页面中引用ext-all转载 2016-07-18 10:16:34 · 3284 阅读 · 0 评论 -
ExtJS4 Ext.create弹出新窗口
效果图:Grid.jsExt.define('V5.user.view.Grid', {extend : 'Ext.grid.Panel',xtype : 'userGrid',tbar : [{xtype : 'basebutton',text : '新建',btype : 'add'},'->',{xtype : 'rse原创 2016-08-15 16:27:57 · 5298 阅读 · 0 评论 -
ExtJS4 grid单元格添加复选框
效果图://添加复选框var deal = function(grid){//获取视图行数var rows = grid[0].getView().getStore().totalCount;//获取视图列数var cols = grid[0].getView().componentLayoutCounter;//遍历节点for(var i = 0;原创 2016-08-11 15:40:34 · 3923 阅读 · 0 评论