随笔分类 -  Extjs 4.1.1

ExtJs十四(ExtJs Mvc图片管理之五swfupload)
摘要：经过前几节系列文章，现在只剩下利用swfupload来上传图片的功能了，在ExtJs十一(ExtJs Mvc图片管理之一)中有它的下载地址和加入项目的说明。使用swfupload最麻烦的地方是要有一个HTML元素让它嵌入加载Flash的HTML代码，而且这个HTML元素必须覆盖住Flash来实现功能，这个有点类似做单按钮的上传按钮。现在，先为swfupload生成一个HTML元素来实现它的功能。实现方法是在显示图片的视图底部添加一个工具栏，然后将工具栏分成两部分，第一部分显示一个SPAN元素，第二部分显示一个进度条来指示上传进度。在PicManager.js文件中，找到me.items这句代码 阅读全文
posted @ 2013-05-03 09:50 aehyok 阅读(2048) 评论(2) 推荐(0)
ExtJs十四(ExtJs Mvc图片管理之四)
摘要：现在来实现排序的问题。要实现远程排序，首先要清楚的是排序信息是如何提交到服务器的，而这个，利用FireBug相当简单。在VS，切换到PicManager.js文件，找到filestore的定义，先将renmoteSort修改为true。然后添加sorters配置项，代码如下： sorters: [ { property: "modify", direction: "DESC" } ],这段代码的意思就是默认排序的字段为modify，排序方向为顺序排序。那么，这个方法要怎么写呢？首先，要让该方法知道，它要提取的字段包括那些... 阅读全文
posted @ 2013-05-01 00:12 aehyok 阅读(1789) 评论(0) 推荐(1)
ExtJs十三(ExtJs Mvc图片管理之三)
摘要：现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称，因而使用Cellediting插件就可完成工作。要完成这个不难，首先在目录树的定义中加入以下语句隐藏列标题：hideHeaders: true,接着添加plugins配置项来配置CellEditing插件。因为根目录是不运行编辑的，因而需要监听beforeedit事件，如果当前选择节点是根目录就返回false，不允许编辑，代码如下：plugins: [{ ptype: "cellediting", listeners: { beforeedit: function (edit, e) { if ... 阅读全文
posted @ 2013-04-29 23:55 aehyok 阅读(975) 评论(0) 推荐(0)
ExtJs十二(ExtJs Mvc图片管理之二)
摘要：接着图片管理一http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html。先来完成树目录的显示。开始前，现在解决方案中创建一个Upload目录用来存放上传的图片，为了便于测试，在Upload目录下随便添加两个目录，这里添加1和2。好，现在创建一个名为FolderController的控制器，添加必要的引用后，先添加一个字符串常量，用来表示根目录：string root = "../upload";在这里使用虚拟目录是因为可以结合提交数据直接转换为实际目录。这里要注意，当放到服务器上的时候，可能目录结构会根据需要 阅读全文
posted @ 2013-04-28 23:08 aehyok 阅读(940) 评论(0) 推荐(0)
ExtJs十一(ExtJs Mvc图片管理之一)
摘要：前言图片管理要在两个地方使用：一是标签页内的图片管理，一是文章内容编辑时嵌套到插入图片的窗口内。因而，将图片管理做成一个扩展比较方便。当然，做成MVC模式也行，不争论，不讨论。要记住，扩展要写在Scripts\ExtJS\Ux目录下，因为在路径的设置中，扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。片管理的主要界面分两部分，左边以树的形式列出文件目录，要实现目录的添加、删除和编辑功能，右边则以预览形式显示目录中的文件，主要功能是上传文件和删除文件。上传文件将使用Swfupload，它可一次上传多个文件，到http://code.google.com/p/sw 阅读全文
posted @ 2013-04-27 23:32 aehyok 阅读(3153) 评论(0) 推荐(2)
ExtJs十(ExtJs Mvc用户管理之二)
摘要：前言为了防止意外情况，这里添加了try模块，在错误的时候会将错误信息作为Msg关键字的值返回。而在客户端脚本，目前是没有处理错误信息的代码的，因而在这里返回的错误信息，客户端是看不到。如果要处理这样的错误信息，就要在Store的Proxy中监听exception事件。因为exception事件的回调函数是一致的，因而可以统一到一个函数中处理，就不用复制再复制了。先切换到Index.cshtml，在Ext.ns下添加以下代码定义处理exception事件的回调： ExtMVCOne.ProxyException = function (proxy, response, op... 阅读全文
posted @ 2013-04-26 13:20 aehyok 阅读(1645) 评论(0) 推荐(1)
ExtJs九(ExtJs Mvc用户管理之一)
摘要：首先要做的是为用户信息创建一个模型，在Scripts\app\model目录下创建一个名为User.js的文件，然后添加以下模型定义代码：Ext.define('ExtMVCOne.model.User', { extend: 'Ext.data.Model', fields: [ "id", { name: "Username", defaultValue: "newuser" }, { name: "Email", defaultValue: "newuser@emai 阅读全文
posted @ 2013-04-25 23:08 aehyok 阅读(1649) 评论(1) 推荐(1)
ExtJs八(ExtJs Mvc创建ViewPort续)
摘要：前言现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的（deferredRender值默认为true），但是它会预加载所有的类，因而当类文件很多的时候，加载时间就是一大问题了。这个，也可通过SDK打包的方式解决，不过在设计阶段还是要考虑的。另一种好的解决方法是，只使用标签页的标签，而不使用其主体加载内容，另外使用一个容器，内部使用CardLayout作为布局.在这里，将展示另一种方式，就是在标签页激活时才去加载内容页。因而，这需要监听标签页的activate事件。这样，问题又来了，是在标签页面板监听activate事件，还是在每个独立的标签页内监听activate事件。如果是在标 阅读全文
posted @ 2013-04-23 13:00 aehyok 阅读(995) 评论(0) 推荐(1)
ExtJs七(ExtJs Mvc创建ViewPort)
摘要：前言在4.1的时候，要先创建一个扩展于Ext.app.Application的类，然后用create创建它的实例来开始应用程序的。而在4.1.1，则可直接调用application方法开始执行应用程序，简化了。调用application方法，其参数是一个配置对象，主要配置项有以下三个：name：用来定义应用程序的名称，在这里是ExtMVCOne。appFolder：应用程序的路径，这里是scripts/appautoCreateViewport：默认值为false，在这里要设置为true，让它自动加载\Script\app\View目录下的Viewport.js文件。因为目录已经在Loader 阅读全文
posted @ 2013-04-22 17:40 aehyok 阅读(2122) 评论(0) 推荐(1)
ExtJs六(ExtJs Mvc首页展示)
摘要：要区分登录前和登录后，判断Request的IsAuthenticated方法就可以。因为要通过服务器段代码执行不同的脚本，因而要将Loder这些公共代码抽出来独立在一个Script块里，而不同的脚本在不同的代码里，最终代码如下： <script type="text/javascript"> Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs/ux', ... 阅读全文
posted @ 2013-04-22 12:58 aehyok 阅读(1503) 评论(1) 推荐(1)
ExtJs五(ExtJs Mvc登录优化)
摘要：前言继上一节中简单的实现了登录之后http://www.cnblogs.com/aehyok/archive/2013/04/20/3033296.html，现在我们可以进行对登录界面进行再次的优化。MemerShip配置首先打开Web.Config文件，在configuration段内添加一个数据库连接定义，代码如下： <connectionStrings> <add name="ConnectionString" connectionString="Data Source=MWVCMNFFK0ZAZT5;Initial Catalog=Sim 阅读全文
posted @ 2013-04-21 22:49 aehyok 阅读(1370) 评论(3) 推荐(2)
ExtJs四(ExtJs MVC登录窗口的调试)
摘要：前言继上一节中实现了验证码http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html，现在我们可以进行对登录界面进行整合调试了。正题打开系统的首页页面文件，Views\Home目录下的Index.cshtml文件。要动态加载登录窗口，需要先设置好加载路径，因而在onReady函数前面加入以下代码： Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs/ux' }});代码中，enabled为true，表示开启. 阅读全文
posted @ 2013-04-20 23:27 aehyok 阅读(4820) 评论(1) 推荐(3)
ExtJs三(实现验证码图片控制器)
摘要：前言在Extjs二(实现登录)http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html，今天紧跟上一次内容继续，本次主要就是实现验证码图标控制器。实现验证码图片控制器1.现在项目中添加一个Helper目录，该目录将用来放置一些辅助性的类，包括一些自定义的实用方法。然后把VerifyCode.cs文件复制到该目录下，打开该文件，为其添加命名空间“ExtMVCOne.Helper”，这样做的目的是为了方便控制器访问该类。接着在控制器目录（Controllers）添加一个名为VerifyCodeController的控制器，因为输出的 阅读全文
posted @ 2013-04-19 10:49 aehyok 阅读(3526) 评论(1) 推荐(1)
ExtJs二(实现登录)
摘要：前言 在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境，本次课程主要是通过Ext组件来实现登录。开始动手1.在解决方案资源管理器中选择Scripts\ExtJS\ux目录，单击右键选择添加，新建项，在弹出窗口中选择Jscript文件，并将名称修改为login.js（以后的项目的可直接将该文件复制到该目录）这里要注意，文件名不能用类的全名做文件名，因为动态加载会根据类名自动找到目录并加载文件，类名中最后一个小数点后的名称就是文件名，例如，登录窗口的类全称为Ext.ux.Login，而login. 阅读全文
posted @ 2013-04-18 16:03 aehyok 阅读(7801) 评论(3) 推荐(1)
ExtJs一(Hello World)
摘要：前言 本文原文链接地址http://aehyok.com/Blog/Detail/48.html 来学习一下ExtJs，今天主要来了解一下ExtJs在Asp.Net Mvc3.0中的基本架构搭建。 所使用的ExtJs版本为4.1.1,下载地址为http://cdn.sencha.io/ext-... 阅读全文
posted @ 2013-04-17 12:35 aehyok 阅读(3430) 评论(5) 推荐(1)