ExtJs 学习笔记

1、显示中文  <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>

2、属性： 验证提示信息： blankText:'姓氏不能为空！' Ext.getDom("testDom"); // 通过id值获取对象

3、显示简单Grid

首先需引入 <link href="~/extjs-4.1.1/resources/css/ext-all.css" rel="stylesheet" /> <script src="~/extjs-4.1.1/ext-all.js"></script>

然后script代码: <script type="text/javascript">

Ext.onReady(function () {

Ext.define('Company', {

extend: 'Ext.data.Model',

fields: [

{ name: 'company' },

{ name: 'price', type: 'float' }

]

});

//定义json字符串 数组

Ext.grid.dummyData = [

['3m Co', 71.72],

['Alcoa Inc', 29.01]

];

//定义数据源

//第一种后台序列化json数据方法

public JsonResult IndexToJson()

{

　　 return Json(bll.GetUserList(), JsonRequestBehavior.AllowGet);

}

//第二中后台序列化json数据有分页

public ActionResult IndexToJson()

{             List<Users> item = showUsersByGao(1, 20, "", "").ToList();

JavaScriptSerializer j = new JavaScriptSerializer();

　　　　　　string json = j.Serialize(jsons);

　　　　　　 json = "{\"totalCount\":" + 70 + ",\"topics\":" + json + "}";

　　　　  return Content(json);

}

var store = Ext.create("Ext.data.Store", {

model: "Company",

proxy: {

//数据从自定义的json字符串中读取

　　type: "memory",

　　data: Ext.grid.dummyData,

　　reader:"array"

//数据从自定义的json字符串中读取

　　type: "ajax",

　　url: "/home/IndexToJson",

　　reader: new Ext.data.JsonReader({ model: "Company" }) //无分页

reader: new Ext.data.JsonReader({ totalProperty: 'totalCount', root: 'topics' },

{ model: "Company" }    ) //有分页

},

autoLoad: true,

//定义每页显示多少条数据（注：这里必须写，不然分页无效）

pageSize: 20         });

//定义面板

var grid1 = Ext.create('Ext.grid.Panel', {

store: store,    //数据源

width: 600,

height: 300,

collapsible: true,        //是否可折叠

title: '标题',

renderTo: Ext.getBody(),   //放置地方

multiSelect: true ,  //是否选中多行

columnLines: true,  //是否显示列间隔线

//列信息             columns: [

{ xtype: 'rownumberer', width: 50, sortable: false},    //显示行号

{ text: "公司名称", flex: 1, dataIndex: 'company' },

{                     header: "密码",        //表头

width: 135,

dataIndex: "UserPass", //对应的数据源字段

sortable: false,   //是否显示排序

flex: 1 ,       //是否显示底部滚动条                 }             ] ,

//表头信息

tbar: [{

id: 'btnAdd',

text: '新增',

tooltip: '新增',

iconCls: 'add',

handler: "add"

}],

//显示分页工具栏

bbar: {    //或者  bbar:new Ext.PagingToolbar({  })

xtype: 'pagingtoolbar',

store: store,  // 指定该分页工具条控制bookStore的数据加载

displayInfo: true,

displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

emptyMsg: '没有记录'

},

});

store.loadPage(2); //页面加载时显示第几页  //往后台传递分页数据

store.load({ params: {   start: 0,  //显示第几页   limit: 20 //每页显示多少条数据   } });      });

</script>