随笔分类 - JS
摘要:《回到系列目录本篇讲解Ext另一个重要的概念:布局。一般的容器类控件都是通过配置项items添加子控件的,这些子控件相对于父控件怎么定位呢,这里就要用到布局。某些容器类控件,它本身默认就集成了一种布局方式,例如比较典型的是:Ext.container.Viewport 布局控件,它其实就是一个border布局的容器,还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。一、absolute这种方式的布局可以对子元素相对于父级容器控件进行绝对定位,它包含了x、y两个配置项用于定位。我们来看看一个例子:[Js] //absolute Ext.c...
阅读全文
摘要:《回到系列目录本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中,比如按钮、工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单);ext对绘图的支持可以让我们通过js来绘图;大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。一、Ext.menu.Menu 菜单1.菜单的定义下面我们来定义一个菜单,它包括一个下拉列表,还有颜色选择器,日期选择器等菜单项。[Js] //下定义一个下拉列表 var combo = Ext.create('Ext.form.ComboBox', { store: new Ext.data.Ar...
阅读全文
摘要:《回到系列目录本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息。一、Ext.toolbar.Toolbar工具栏控件可以被附加在面板、窗口等容器类控件中,可以在四个方位添加多个工具栏控件。我们演示多个Ext.toolbar.Toolbar控件,然后附加到面板的不同位置。1.在工具栏上添加菜单、按钮、搜索功能我们这里借用上一篇所讲到的listview控件作为数据展示,把listview放入一个面板控件中
阅读全文
摘要:《回到系列目录本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到GridPanel一起了,做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式,数据的展示形式不限于表格,可表现为灵活的方式,同时Ext为其提供了基本的排序分页、项选择、事件等支持。如果不做特殊说明,本系列文章都以mvc的服务端返回json格式的数据作为数据源的方式。一、Ext.ListView下面我们看看一个基本的表格数据展示实例
阅读全文
摘要:《回到系列目录本篇讲解选项卡控件。一、基本选项卡首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取:1.基本方式:通过定义html和items的方式。2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:[html] <h1>基本选项卡</h1> <div class="content" sty
阅读全文
摘要:《回到系列目录本篇讲解三个容器类控件。一、面板控件 Ext.Panel一个面板控件包括几个部分,有标题栏、工具栏、正文、按钮区。标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方。下面介绍几个基本配置项:1.title:设置面板标题文本。2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件。4.buttons:设置按钮区的按钮。下面看看面板生成代码:[html] <h1>Panel</h1> <div id="
阅读全文
摘要:《回到系列目录本篇要登场的有三个控件,分别是滚轴控件、进度条控件和编辑控件。一、滚轴控件 Ext.slider1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向、纵向,以及单值、多值选择的特性:[html] <h1>滚轴控件</h1> <div class="content"> <h2>横向,初始值50</h2> <div id="slider1"></div> <h2>纵向,带提示</h2> <div id="
阅读全文
摘要:《回到系列目录本篇介绍提示控件,ExtJs支持两种方式定义提示,可以支持普通html元素和一般的ExtJs UI控件。一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:[html]<div id="tip1" class="TipDiv">普通提示</div>接着在js中添加如下代码:[Js] Ext.create('Ext.tip.ToolTip', { target:
阅读全文
摘要:《回到系列目录本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置。如下是用到的html:[html]<h1>各种消息框</h1><div id="div1" class="content"><button id="bt1" type="button" >Confirm</button><button id="bt2" type="button" >Prompt</bu
阅读全文
摘要:《回到系列目录从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮,下拉选项式按钮和按钮组合等。我们先看看效果图:预览如下是用到的html:[html] <h1> 三种方式实现事件: </h1> <div id="div1" class="content"> <ul> <li id="li1"></li> <li id="li2">&l
阅读全文
摘要:《回到系列目录本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。[html] <h1>使用标签tpl和操作符for</h1> <div class="content" id="div1"></div> <h1>在子模
阅读全文
摘要:《回到系列目录本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。一、ExtJs中的Ajax:Ext.Ajax.request通过客户端向服务端发送Ajax请求,可以“直接”调用MVC的action方法,并传递参数,action返回值可以是普通字符串,也可以是json对象。请求可以添加自定义头信息。看下面例子:1.异步请求,发送自定义请求头:html页面如下:[html]<h1>Ajax服务端请求</h1><div c
阅读全文
摘要:《回到系列目录本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载、类的封装等。一、动态引用加载ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。1.动态引用外部Js[Js]//加载配置可用Ext.Loader.setConfig({ enabled: true });//动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间Ext.Loader.setPath('Ext.ux', '../ux/');2.动态加载类[Js]//加载单个类Ext.r
阅读全文
摘要:《回到系列目录现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势。ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery。下面我就通过对比API,体现两种框架的异曲同工之处。我们已JQuery API为主线,来看看ExtJs是否有替代的方案。注意一点:ExtJs4.0相对上一版本改动较大,本系列文章暂时只对ExtJs4.0及以上版本提供支持。一、选择器1.上下
阅读全文
摘要:看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作。表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB。nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁。由于其本身的“非关系”的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的“ORM”框架。 下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取,并展示在前台Jqgrid表格上。这个“简易系统”的基本设计思想是这样的:...
阅读全文
摘要:一、主要API接口getGridParam、setGridParam: getGridParam方法: getGridParam("url"): 获取当前的AJAX的URL getGridParam("sortname"):排序的字段 getGridParam("sortorder"):排序的顺序 getGridParam("selrow"):得到选中行的ID getGrid...
阅读全文