对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表...文件描述:添加接口信息 //----------------------------------------------------------------------------------- // 创建者...: // 创建时间:2013-06-20 //==============================================================================...: // 创建时间:2013-06-20 //==============================================================================...win.close(); } }) } 删除函数,包含到上面那部分代码中了.下面我们一步一步来优化代码: 修改删除函数: 原先的OnDelete函数全部去掉,在相应的删除事件中添加
其中index.html的内容如下: Account Manager 在 app.js中创建一个应用 每一个Ext JS4应用都通过实例化一个 Application类来启动。 ...在此类中我们拓展了Grid 组件设置了alias (别名)以便能够通过xtype方式使用它。 我们也通过store配置了数据和grid需要渲染的列。 下一步我们需要在 Users 控制器中添加视图。...这告诉应用自动的加载此视图,因此我们在启动时能够使用它。 此应用使用了Ext JS 4的新的动态加载系统来动态的从服务器端拉去此文件。...最后创建了两个按钮,一个是关闭窗口一个是用来保存修改的值。 现在需要做的就是将此视图添加到控制器中,渲染并且将User 加载进去。...在 Ext JS 4中proxy(代理)是从Store或者一个Model中加载或者保存数据的一种方式。 有 针对AJAX, JSON-P 和 HTML5 localStorage 的代理。
创建对象的方法: 使用new 关键字创建对象。 new classname ([config]) 使用Ext.create方法创建。 ...Reader 对象的配置项 Reader 对象的配置决定了如何从返回的数据中返回的数据中提取数据。 ...("MyClass.C"); objC.show(); // A mixins 中后者的方法无法覆盖前者的同名方法。.../viewport.js 中;如果为false 的时候,我要在launch 中收到创建应用视图。...Viewport.js 的定义 Viewport 作为我们应用程序的视图模板,可以被单个定义在Viewport.js 文件中 它定义的很简单,通常用来将一个或者多个view 作为它的子控件。
其中字典类型组件代码: var group_grid = Ext.create('Ext.grid.Panel', { title:'字典类型列表', region...; return; } 当我们在左侧点击编号为3的选择框时,会通过ajax方式从后台取数据显示在右侧维度字典列表组件中...通过ajax取数据的代码,返回的数据是json形式的: //数据字典store var items_store = Ext.create('Ext.data.Store', {...继续演示ExtJS给我们带来的便利,当我们在右侧点击新增时,要求数据字典的值必须为值,否则弹框提醒用户,由于Extjs的特点只需加两句代码就可以搞定,如下代码中的标记处1和标记处2, //字典类型添加、...修改表单 var item_Form = Ext.create('Ext.form.Panel', { width : 400, height : 200
容器负责管理组件和它们的子元素的生命周期,包括创建、渲染、尺寸和位置,还有销毁。一个典型的应用程序组件层级从顶部的Viewport开始,在它里面内嵌了其他的容器或者组件。 ?...比如 Ext.panel.Panel 有一个称作’panel‘的xtype。所有组件的xtype都被列在组件的API文档中。上面的例子展示了如何去添加一个已经加载好的组件到一个容器中。...创建一个组件的(继承了该组件的)新类并替换它在组件层级中的位置,比创建一个拥有一个ExtJS组件,还要在外部渲染和管理的新类,要容易。...12 onRemoved - 允许在一个组件被从他的父容器中移除的时候有附加的行为。...3 onDockedAdd - 这个方法在一个对接条目被加入到面板时被调用。 4 onDockedRemove - 这个方法在一个对接条目被从面板中移除时被调用。
模型工作起来很香ExtJS 3中的Record类,而且一般同Stores一起用来在表格(grid)和组件中展示数据。 2 视图表示任何类型的组件 - 表格、树,还有面板等都是视图。...在MVC布局中,所有的类都放在app文件夹中,里面一次放着区分你的模型、视图、控制器和存储(store)的命名空间的文件夹。下面是当我工作完成以后的一个简单的示例应用的文件结构: ?...items: { xtype: 'userlist' } }); } }); 这里只需要注意的另外一件事情就是我们在视图数组里面指定了...最后我们创建了两个按钮,一个用来关闭窗口,另一个将被用来保存我们(对用户账户)做出的更改。 我们现在需要做的是:把视图添加到控制器中,渲染它并且把User加载到它的里面。...代理(Proxies)是ExtJS 4 中从存储和模型中加载和保存数据的方法。其中有AJAX,JSON-P和HTML5本地存储代理。
相信很多人都用过,我也不例外,但是一直都是用它来为sencha touch打包,这确实有点大材小用,因为phonegap的api相当犀利,例如加速度传感器,照相机,振动器,文件操作等等,这些本来js都是无法实现的...但如果我把它打包到手机中,文件列表就会出现,不错,phonegap就是如此神奇。...image.png 图上完后,开始讲代码了,从fileList这个View讲起,fileList定义如下: Ext.define('xanxus.view.fileList',{ extend...List,这是因为我在controller里动态地控制增加和删除list,而list定义如下: fileStore=Ext.create('Ext.data.Store',{...,在我下一篇文章中会讲到。
title: 'Child Panel 2', height: 100, width: '75%' } ] }); 我们创建了一个...Panel,它把它自身渲染到文档body中,并且我们使用了items配置往容器Panel中添加了两个子Panel。...使用布局 在上面的例子中,我们没有定制容器Panel的布局。请注意子Panel是如何一个接在一个的后面放置的,就像DOM结构中一般的块元素那样的。...让我们假设一下,举个例子,我们想要我们的两个子Panel边靠边的放置,每个都占据容器宽度的50%——我们可以简单的通过在容器上提供一个布局配置,使用一个Column Layout。...一般我们可以依赖框架去为我们处理布局的更新,但是有时候我们想去阻止框架自动布局以便我们能够在我们已经准备好以后把所有的操作打包,并且手动的去触发布局。
如果想要在脚本中使用ExtJS的提示信息,可将书附带的资源包中的Ext.js文件复制到ExtJS目录中,复制后,在解决方案资源管理器将Ext.js拖到到login.js文件中,就会生成以下代码: //...下面要做的是先定义好表单,在扩展内加入以下代码: initComponent: function () { var me = this; me.form = Ext.create...这写法在Ext JS文件中始终贯穿其中,本着拿来主义的精神,好东西应该学一下。...在创建表单的前面添加以下创建Img对象实例的代码: me.image = Ext.create(Ext.Img, { src: "/VerifyCode" }); 千万不要在创建表单后面创建...[me.image] } 从代码可以看到,使用容器的作用就是可以使用fit布局来限制图片的尺寸,这样布局就容易多了。
Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS 3 中的...Record类有点像(区别是,Record只是单纯的扁平结构,而Model可以nest),通常都用在Store中去展示grid和其他组件的数据 View视图 是组件的一种,专注于界面展示 - grid,...launch: function () { Ext.create('Ext.container.Viewport',{ // 布局 layou:'fit', ...items: [{ xtype: 'studentlist' }] }) } }); View 定义一个视图。...', dataIndex: 'sex', flex:1} ]; this.callParent(arguments); } }); controller 层 创建文件
写在前面 之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利,有童鞋在下面留言问extjs的API该怎么看?很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了,不知道怎么看api。...API中,都是针对每个类来讲解的,每个类中又基本上都由以下4部分组成: Config Options , 配置项 Public Properties, 公共属性 Public Methods, 公共方法...下的内容,只有你在实例化的时候用的,也就是你在new 类名({…})时用的。...true, store : subsys_store, selModel:sub_selModel, columns : [ { xtype...ExtJs的事件监听,除了直接在对象创建时指定listeners外,还可以在对象创建后用on方法来实现动态的添加。
现在考虑一下视图的选择问题,在操作系统中,一般都可以使用拖动的方式选择文件,这个功能相当实用,而在Ext JS,要实现该功能也很简单,只有使用Ext JS包中的用户插件Ext.ux.DataView.DragSelector...先在解决方案ExtJS\ux目录下创建一个DataView目录,然后在Ext JS包中examples\ux\DataView目录下,将DragSelector.js文件复制到该目录。为什么要这样?...的定义中添加以下代码来创建插件: plugins: [ Ext.create('Ext.ux.DataView.DragSelector', {}...) ], 因为DragSelector类没有定义别名,所以不能使用xtype进行定义,只能直接创建了。...在dataview的定义中,添加以下代码监听视图的selectionchange事件: listeners: { scope: me,
用户管理添加修改删除重置密码 首先切换到用户视图脚本文件,为Grid添加一个RowEditing插件,这不难,创建RowEditing的实例,并添加到plugins就行了,代码如下:...xtype: 'checkbox', cls: 'x-grid-checkheader-editor' } } ] 代码中,用户名只是简单的不允许为空;电子邮件除了不允许为空外...删除用户和重置密码默认状态为disabled状态,只有在Grid选择行后才会启用。 然后可以F5运行,然后点击Grid数据行,效果如下 ? 现在,要在控制器完成各种视图操作了。...接着在Store中添加一条记录。最后调用startEdit方法进入编辑状态。...如果不清楚,可在页面单击添加按钮,然后单击保存按钮,在Firebug中就可以看到如图28所示的提交数据。 在服务器端的处理过程就是通过data提取数据,然后转换为JSON数组,从数组中把数据提取出来。
要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。...模型的定义可以独立成一个文件,也可以在initComponet方法内定义。如果在独立的文件定义,就要在扩展中添加requires配置项引用模型。...在代理定义中,reader和writer的定义可标准化数据的输入输出,这个与用户中的定义是一样的。代理的API则定义了操作的提交路径。...在这里在模板添加了一个filesize方法,用来转换文件大小的显示格式。 因为视图不是面板,没有工具栏组件,因而要在其外面套一个面板用来放置工具栏,所以在视图的定义中没有边框布局的配置项。...然后切换到主面板的控制器,在图片管理的activate方法内,删除alert语句,添加以下代码: var view = Ext.create('Ext.ux.PicManager
我们发现渐进式地来定义你的视图并且将其加入viewport中是构建你UI的最快方式。 创建一个构建块 通过利用前面文章介绍的内容,我们可以一次定义出多个视图。...这里允许我们使用之前在视图中定义好的别名作为xtype的值。...应用逻辑 在 Ext JS 3中,我们通常将应用的逻辑添加在视图的按钮处理器方法中,绑定子组件和拓展视图时重写拓展视图的方法。...在init方法中,你应该设置对视图和应用事件的监听器。 在大型的应用中,你也许希望在运行时再加载额外的控制器。你可以通过getController 方法来实现。...在我们例子里,组件只需要简单的使用视图的xtype属性。 每个查询都绑定一个监听器配置。 在每个监听器配置里,我们想要监听事件名。
检查A数据库中有哪些存储过程在B数据库中不存在 select name from Jaguar.dbo.sysobjects where xtype='P' and name not in(select...在全部用户表和存储过程中寻找包含某段文字的用户表和存储过程 select OBJECT_NAME(id) AS name,[name] as content,xtype from sysobjectswhere...EXCEPT 运算符 EXCEPT 运算符通过包括所有在 TABLE1 中但不在 TABLE2 中的行并消除所有重复行而派生出一个结果表。...创建视图: create view viewname as select statement 删除视图: drop view viewname 几个简单的SQL语句: 总数:select count *...[视图名] GO --------------- -- 判断要创建的函数名是否存在 if exists (select * from sysobjects where xtype='fn' and name
3.打开新窗口 使用Qt的WebKit非常简单,直接把QWebView控件拖放到界面中去即可,但是默认的QWebView在实现上有些缺憾,比如无法打开新窗口,无法下载文件,无法打印等。...实参的类型为QNetworkRequest,其他两个实参从原始方法中获得。 .../guide/application_architecture),系统界面中包含三个视图:menuTree、titleBar和contentTabPanel。...2.定制模块加载基址 Extjs有一套独特的模块加载机制,它可以通过js类的名称空间来加载相应的js代码文件,比如视图文件的名称空间是UTMP.sys.menuTree,ExtJs框架会从...”的错误信息),之所以在IDE内能顺利执行,是因为IDE已经为程序执行创建好了环境,但倘若不解决此问题,就无法把应用程序分发给直接用户。
可以根据不同的需求创建不同的视图,简化用户的操作. 3)逻辑数据独立性: 视图可以在应用程序与数据表之间,起到让双方在一定程度上独立的作用....即程序可以建立在视图上,当数据表发生变化时,可以在表上修改视图,通过视图屏蔽表的变化,从而使应用程序可以不改变.反之,当应用程序发生变化时,也可以在表上修改视图,屏蔽应用的变化....的水平视图,从数据库student info的Student表中查询出性别为“男”的所有学生的资料。...查看视图: 语句: select * from stuview2 执行结果: (2)创建一个名为stuview3的投影视图,从数据库student_info的Course表中查询学分大于3的所有课程的课程号...student表中的赵小林的家庭住址已发生了改变 select * from student 运行结果: 6)从视图stuview1中将班级为054、姓名为“赵小林”同学删除。
领取专属 10元无门槛券
手把手带您无忧上云