摘要：
本篇讲解三个工具栏控件。其中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下面我们看看一个基本的表格数据展示实例：[html] 阅读全文
摘要：
本篇讲解选项卡控件。一、基本选项卡首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：1.基本方式:通过定义html和items的方式。2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：[html] 基本选项卡 这个... 阅读全文
摘要：
本篇讲解三个容器类控件。一、面板控件 Ext.Panel一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项：1.title:设置面板标题文本。2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。3.html，items:前者用来设置正文部分的html，后者设置正文部分的ext控件。4.buttons:设置按钮区的按钮。下面看看面板生成代码：[html] Panel [Js]Ext.onReady(function () { va... 阅读全文
摘要：
本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。一、滚轴控件 Ext.slider1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：[html] 滚轴控件 横向，初始值50 纵向，带提示 多值，自定义提示 [Js] //横向，初始值50 var slider1 = Ext.create('Ext.slider.Single', { renderTo: 'slider1', w... 阅读全文
摘要：
本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：[html]普通提示接着在js中添加如下代码：[Js] Ext.create('Ext.tip.ToolTip', { target: 'tip1', html: '最简单的提示' });OK,第一个提示已经添加成功，我们来预览一下效果：2.可关闭的提 阅读全文
摘要：
本篇演示消息对话框的用法，ExtJs封装了可能用到的各类消息框，并支持自定义的配置。如下是用到的html：[html]各种消息框ConfirmPromptDIY窗口进度条进度条2wait一、警告对话框和确认对话框展示一个带“是”，“否”按钮的确认对话框。当单击按钮时，执行回调函数，获取按钮类型，并弹出一个警告对话框。[Js] Ext.get("bt1").on("click", function () { Ext.MessageBox.confirm("标题", "详细信息内容", function (btn) { 阅读全文
摘要：
id="li2"> 带图标菜单： 带分割线的按钮 菜单式按钮 按钮组合 一、基本按钮，三种方式实现按钮事件这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码：[Js] Ext.create("Ext.Button", { renderTo: Ext.get("li1"... 阅读全文
摘要：
本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇，但是我个人不是很喜欢那种html混编C#的方式，仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html，而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。行文之前我先把公共的html和用到的js数据贴在前面，后面的代码都要引用到。[html] 使用标签tpl和操作符for 在子模板的范围内访问父元素对象 数组元素索引和简单运算支持 自动渲染单根数组 条件逻辑判断 即时执行任意的... 阅读全文
摘要：
本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持，包括Ajax封装，函数事件操作封装，还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。一、ExtJs中的Ajax：Ext.Ajax.request通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息。看下面例子：1.异步请求，发送自定义请求头：html页面如下：[html]Ajax服务端请求一共发起了0次请求。我们先通过一个按钮单击事件触发ajax请求，服务端返回 阅读全文