extjs初接触（一）

最新推荐文章于 2019-08-01 10:24:47 发布

weixin_30293079

最新推荐文章于 2019-08-01 10:24:47 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/flyman/archive/2010/02/01/1660691.html

版权

本人网站美工能力基本为零。最近被迫做界面设计方面的东东，不得已上网查找各类html模板，找到根自己需求相似的模板本来已经够浪费时间了，找完还有改成适合自己的东西，太麻烦了。最近看了传说中的弦哥的关于网站架构整合开发的系列大作，才知道extjs是个好东东。好东东咱要用用。

然后跟学其他技术一样，百度google最简单的例子，到处找电子书看。忙乎了两天，开始自己敲代码。下面这些老鸟就不必看了，新鸟不妨一起探讨学习。

第一个例子要做成这样：页面上就一个下拉框，点击下拉按钮的时候要从后台读取数据显示。就这么简单。

这时候的我还不知道extjs如何异步获取后台数据，也不知道如何把获取到的数据显示到前台页面上。所以第一步我决定直接编程“编”出一些假数据。下面的例子是参考一个老外的教程写的，英文好的可以直接看这里。不想看英文的就直接看下面的吧，照那个老外的例子做完之后我会做一些扩展，比如把“编”出的数据换成从数据库生成，另外还会扩展到将数据显示到gridpanel上，然后做一些分页，最后试试当数据量达到百万级的时候效率如何。不大喜欢webfrom，用asp.net mvc来做。

新建一个asp.netmvc项目。extjs库文件的下载引用就不写了。先做界面（就一个下拉框……）。直接在js文件里面写。

代码

var combo = new Ext.form.ComboBox({
                store: categoriesStore,
                displayField: ' Name ' ,
                valueField: ' Id ' ,
                forceSelection: true ,
                triggerAction: ' all ' ,
                selectOnFocus: true ,
                mode: ' remote ' ,
                typeAhead: true ,
                emptyText: ' Select a category... ' ,
                applyTo: ' categories-combo '
            });

　　这时候下拉框就做好了（……）。显示效果比普通html的下拉框要好看一些（老鸟飘过……）。

写实体类：

public class Category
    {
         public int Id { get ; set ; }
         public string Name { get ; set ; }
    }

在写个类封装实体类数组：

public class CategoriesContainer
    {
         public Category[] Categories { get ; set ; }
    }

生成实体类的代码：

代码

public class CategoriesDataContext
    {
         public static CategoriesContainer GetCategories()
        {
            Category[] categoriesArray = new Category[ 10 ];
             for ( int i = 0 ; i < 10 ; i ++ )
            {
                Category category = new Category { Id = i, Name = " Category " + i.ToString() };
                categoriesArray[i] = category;
            }
            CategoriesContainer container = new CategoriesContainer();
            container.Categories = categoriesArray;
             return container;
        }
    }

这时候就可以再controller里面调用了。

代码

public JsonResult GetData()
        {
            JsonResult test = new JsonResult();
            test.Data = CategoriesDataContext.GetCategories();
            test.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
             return test;
        }

js文件通过调用上面这个函数以获取数据。

var categoriesStore = new Ext.data.JsonStore({
url: ' http://localhost:2792/ext/GetData ' ,