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>

巴特西

ExtJs 学习笔记

最新文章

热门文章