开始使用Grid

 

本文涉及的范例代码，可以在 这里下载。一个有效的例子可在 这里找到。

步骤一 定义数据(Data Definition)

首先要让Grid知道XML文档定义了每一行是什么数据。正如所见，我们命名了"item"在下面的XML样本中。

单行的XML样本数据

<Item>

    <ASIN>0446613657</ASIN>

    <DetailPageURL>

        http://www.amazon[*SNIP*]JVQEG2

    </DetailPageURL>

    <ItemAttributes>

        <Author>Sidney Sheldon</Author>

        <Manufacturer>Warner Books</Manufacturer>

        <ProductGroup>Book</ProductGroup>

        <Title>Are You Afraid of the Dark?</Title>

    </ItemAttributes>

</Item>

接着需要定义某一列为“统一标识（Unique Identifier）”,即ID,根据“id"所设置的那个节点来读取值（样本代码第九行）。本例中的样本数据是”ASIN"列。

数据定义的最后部分就是指定你需要显示的字段(Fields),把这些字段放到一个数组之中，并保证这些字段与你的XML数据中元素名称是一致的，而且还要注意先后顺序，这里的顺序不需要和XML文件中顺序一致。

var dataStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
        reader: new Ext.data.XmlReader({
               record: 'Item',
               id: 'ASIN'
           }, [
               'Author', 'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

步骤二 列模型（Column Model）

下一步便是定义Column Model 列模型。简单地说，就是通过一些属性的设置，决定每一列怎么控制或怎么显示，这是一个由每列的配置参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数组一致。较常见的参数通常是header和width，所以你会觉得这两项是必须要设置的，然而宽度（width）其实不总是需要的，因为稍后我们将使用autoWidth/Height来代替。

列模型样本

var colModel = new Ext.grid.ColumnModel([

               {header: "Author", width: 120, dataIndex: 'Author'},

               {header: "Title", width: 180, dataIndex: 'Title'},

               {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},

               {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}

]);

最后是将DataStore和Column Model两样东西传入到Grid，渲染结果，然后加载来自DataStore的数据，这些就是你让Grid工作起来的最基本因素！

进行渲染！

 var grid = new Ext.grid.Grid('mygrid', {

        ds: dataStore,

        cm: colModel

});

grid.render();

dataStore.load();

 

Grid组件的简易分页

读者应先下载本例涉及的示范代码。这里是一个已经完成好的例子。

Grid数据

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端事PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据事已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。

 

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")

    or die("Could not connect");

mysql_select_db("test") or die("Could not select database");

 

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";

$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];

 

$rs_count = mysql_query($sql_count);

 

$rows = mysql_num_rows($rs_count);

 

$rs = mysql_query($sql);

 

while($obj = mysql_fetch_object($rs))

{

    $arr[] = $obj;

}

 

Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

 

由于每个后台开发的环境都不尽相同，所以这里的服务端代码就不细究了。

怎么做一个分页的Grid

本例采用的是ScriptTagProxy，原因是 范例代码 和 服务端代码 不是在同一个服务器上（译注：即“跨域”），而大多数的情况是，在同一个服务器上得到数据，直接用HttpProxy就可以了。

使用DataStore与平时唯一不同的地方，便是需要设置totalProerty属性。本例中，我们从服务端的脚本计算出“total”这个值，告诉DataStore总共有多少个记录，这里指的是所有的记录数。

 

    var ds = new Ext.data.Store({

           

        proxy: new Ext.data.ScriptTagProxy({

            url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'

        }),

           

        reader: new Ext.data.JsonReader({

            root: 'results',

            totalProperty: 'total',

            id: 'id'

        }, [

            {name: 'employee_name', mapping: 'name'},

            {name: 'job_title', mapping: 'title'},

            {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},

            {name: 'is_active', mapping: 'active'}

        ])

           

    });

 

分页栏Toolbar

这里加入一个分页栏到Grid的面板中，--差不多完成喽。

 

    var gridFoot = grid.getView().getFooterPanel(true);

 

    var paging = new Ext.PagingToolbar(gridFoot, ds, {

        pageSize: 25,

        displayInfo: true,

        displayMsg: 'Displaying results {0} - {1} of {2}',

        emptyMsg: "No results to display"

    });

 

最后传入start和limit参数以初始化数据。

 

    ds.load({params:{start:0, limit:25}});

 

花时间较多的地方是，在后台如何生成数据，以配合Grid的运作，一旦这些工作OK后，分页Grid再不是一件难事了。

EXT Menu组件

这篇教程中，我们将学习使用Ext的菜单器件（Menu Widgets)。假设读者已经阅读过Ext简介 一文，并懂得一些Ext的相关基本知识。菜单器件是Ext库中较晚实现的组件。它由几个类联合构成，使得创建一个菜单只需若几行代码。

开始！

第一步要做的是，下载本教程的示例zip文件Zip文件包括三个文件：ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中（例如，Ext是在“C:"code"Ext"v1.0”中，那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtMenu.js看看：

Ext.onReady(function() {

        alert('You have Ext configured correctly! We are now ready to do some Ext Menu Magic!');

 });

在Ext的介绍中，我们讨论过使用Ext的原因和Ext.onReady()函数的功能。

创建简易菜单

先看看怎么做一个基本的菜单，然后再讨论代码中的各个组件和知识点。加入下列代码到onReady函数中:

var menu = new Ext.menu.Menu({

    id: 'basicMenu',

    items: [{

            text: 'An item',

            handler: clickHandler

        },

        new Ext.menu.Item({

            text: 'Another item',

            handler: clickHandler

        }),

        '-',

        new Ext.menu.CheckItem({

            text: 'A check item',

            checkHandler: checkHandler

        }),

        new Ext.menu.CheckItem({

            text: 'Another check item',

            checkHandler: checkHandler

        })

    ]

});

 

var tb = new Ext.Toolbar('toolbar', [{

        text:'Our first Menu',

        menu: menu // 分配menu到按钮

    }

]);

 

function clickHandler() {

    alert('Clicked on a menu item');

}

 

 function checkHandler() {

    alert('Checked a menu item');

}

OK 仔细看看这里的代码，首先实例化一个Menu类为变量“menu”。然后Menu的构建函数接受一串的Object Literal作为参数，在先前的Ext教程中我们已经讨对ObjectLiteral进行了解。当前的ObjectLiteral就包含了我们菜单中想要的属性。第一个属性是我们分配的ID，稍后我们可用ID来获取Menu的引用。

 

各种Item的类型

属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是将一个数组作为值（value)传到属性中去。数组里的数据就是我们想要在菜单中出现的每一项。每本例中我们放了六个菜单项，但何解每项的语法（Syntax）都不尽相同呢？第一项是一串Object Literal，包含一组我们可配置的name/value。Ext的底层库会为这串Object Literal按其配置默认地创建item对象。接着第二项是Item对象本身，后面跟着分隔符，最后两个是单选框项。整个过程演示了Ext Widget如何动态的运行。下例各项可填入到数组中：

{text: 'Foo'}                       // Ext 转换这个配置对象到menu item

'Straight Text'                     //文本或原始html (纯文字)

'-'                                 // 创建分隔符

new Ext.menu.Item({text: 'Foo'})    // 创建一个标准item (同{text: 'Foo'})

new Ext.menu.CheckItem()            // 创建单选框item

new Ext.menu.DateItem()             // 创建menu内置的日历控件

new Ext.menu.ColorItem()            //创建一个颜色采集器

new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入任何元素

Item属性

Item接受什么类型的属性呢？本例中我们使用了这两属性：

text: 'An item',

handler: clickHandler

第一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函数（event handler function）。本例中我们将函数clickHandler()和checkHandler()定义在代码的最后。作为演示用途，这仅仅是用 alert()通知你有一个单击的消息。
其它有用的属性是：

cls: 'a-class-name' ,       // 为标准Item手动设置样式和图标ICON

icon: 'url',                 // 如不想用CSS,可直接设置图标的URL

group: 'name of group',      //只适用多选项，保证只有一项被选中

完整的item属性列表在Menu Item文档中。

在UI中摆放菜单

So,创建好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆放到页面中呢?在UI中一个menu可以分配到多个位置（同一个对象，不同位置多次使用），这正是Ext如此强大的原因：每一个器件（widget）切成“一块一快”的类，来构建整个面向对象的动态结构（Structure）。这意味着menu可用于不同的场合。我们可将menu放到有按钮的toolbar中，或用页面中的一个按钮来展开menu，甚至可在Ext的其它器件中（widgets）使用menu作为上下文菜单（Context Menu）。

本例中分配一个menu到toolbar中：

var tb = new Ext.Toolbar('toolbar', [{

        text:'Our first Menu',

        menu: menu // 分配menu到toolbar

    }

]);

Ext.Toolbar构建函数接受两个参数，第一个是指定toolbar的容器（contrainer）；第二个参数是包含全部按钮的数组。这里,我们只使用一个按钮,正如所见，按钮实质上是一串由数组组成的Object Literal,同时这个Object Litetal亦包含了不同的属性。下面是一组按钮对象的Object Litetal属性：

cls: 'a-class-name' ,      //手动设置样式和图标ICON

icon: 'url',                // 如不想用CSS,可直接设置图标的URL

text:'Our first Menu',      // 按钮提示之文字

menu: menu                  // 可以是menu之id或配置对象

Menu的分配方式：

刚才谈到如何分配Menu到工具条中（toolbar），继而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因为menu属性可以以不同方式地分配，即是可以赋予一个menu对象，或是已经建好的menuID，或直接是一个menu config对象。你应该有机会就尝试一下以多种方式创建menu，因为类似的方式方法在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一样的效果，唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单击了。可以的话，把下面的代码也加入到onReady函数中，亲身体验一下：

var dateMenu = new Ext.menu.DateMenu({

    handler : function(datepicker, date){

        alert('Date Selected', 'You chose: '+ date.format('M j, Y'));

    }

});

 

var colorMenu = new Ext.menu.Menu({

    id: 'colorMenu', // the menu's id we use later to assign as submenu

    items: [

        new Ext.menu.ColorItem({

            selectHandler: function(colorpicker, color){

                alert('Color Selected', 'You chose: ' + color);

            }

        })

    ]

});

 

var tb = new Ext.Toolbar('toolbar', [{

        text:'Our first Menu',

        menu: {

            id: 'basicMenu',

            items: [{

                    text: 'An item',

                    handler: clickHandler

                }, {

                    text: 'Another item',

                    handler: clickHandler

                },

                '-',

                new Ext.menu.CheckItem({

                    text: 'A check item',

                    checkHandler: checkHandler

                }),

                new Ext.menu.CheckItem({

                    text: 'Another check item',

                    checkHandler: checkHandler

                }),

                '-', {

                    text: 'DateMenu as submenu',

                    menu: dateMenu, // assign the dateMenu we created above by variable reference,

                    handler: date

                }, {

                    text: 'Submenu with ColorItem',

                    menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id

                }

            ]

        }

    }

]);

 

function clickHandler(item, e) {

    alert('Clicked on the menu item: ' + item.text);

}

 

function checkHandler(item, e) {

    alert('Checked the item: ' + item.text);

}

注意：留意几种不同的方法加入子菜单！还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。

练一练

Ok我们用上述的方法，创建了toolbar和menu，看起来应该是这样的：

上文提及menu可摆放在UI的任何位置，这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和动态添加的功能。

MenuButton

new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

动态添加菜单按钮到Toolbar

这条Toolbar有两个按钮。一个分隔符，和一个纯图标的按钮（附Quicktips）。你可尝试这样做，把zip文件中.gif加入

Ext.QuickTips.init();

 

tb.add('-', {

    icon: 'list-items.gif', //图标可单行显示

    cls: 'x-btn-icon',      // 纯图标

    tooltip: 'Quick Tips
提示文字'

});

更方便的是

一些代码片段，有助你提高效率，留意注释！

// Menus更多的API内容

// 动态 增、减元素

 

menu.addSeparator(); //动态加入分隔符

 

var item = menu.add({

    text: 'Dynamically added Item'

});

 

// items 完整支持Observable API

item.on('click', onItemClick);

 

// items can easily be looked up

menu.add({

    text: 'Disabled Item',

    id: 'disableMe' // <-- 设置ID便于查找lookup

    // disabled: true   <-- 先不disabled 而采用下面的方式

});

 

// 用 id 或 index访问

menu.items.get('disableMe').disable();

下一步是

现在你已经了解菜单组件是如何工作了。下面的资源有助您进一步更深入学习菜单：

模板（Templates）起步

首先建议读者先下载本例的代码，以配合文本的说明。有效的例子在这里。

第一步 您的HTML模板

第一个步骤没有任何特别，这里的HTML可以说是用来格式化你的数据。花括号里面的关键字就是你数据中的{id},{url} 和{text}的容器（placeholder） 。或者用纯数字{0},{1},{2}来表示,但是关键字的命名方式会使你的代码更可读。

现在我们加载html模板，创建一个模板对象（第五行），然后进行编译（第六行）。尽管编译模板不是必须的，但是一般情况下总能改善性能的。

var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';

               var tpl = new Ext.Template(html);

               tpl.compile();

第二步，将数据加入到模板中

这里我们将使用append方法加入两行的数据。正如你所见，元素的“id”、“url”和“text”相对应于上述模板的容器。

tpl.append('blog-roll', {

                   id: 'link1', 

                   url: 'http://www.jackslocum.com/', 

                   text: "Jack's Site"

               });

               tpl.append('blog-roll', {

                   id: 'link2', 

                   url: 'http://www.extjs.com/', 

                   text: "Jack's New Site"

               });

这就是模板的基本知识点，对于你来这说非常简单吧？

下一步

如果你想换个地方，文档区便是一个绝佳的好地方。看看范例Feed Viewer，里面就大量使用了模板。

转载于:https://www.cnblogs.com/tgyun/archive/2009/06/22/ext5.html