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>