EXTjs 简单的表单学习

最新推荐文章于 2017-03-22 13:25:00 发布

茂盛的小绿芽

最新推荐文章于 2017-03-22 13:25:00 发布

阅读量511

点赞数

分类专栏： EXTJs 文章标签： extjs

本文链接：https://blog.csdn.net/u013890437/article/details/38314863

版权

EXTJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最后的结果先看一下：

(1)、首先应创建一个表，设置表的行和列以及类型，列的定义是CloumnModel ,cm,应该首先创建的

(2)、表格的结构确定后，我们该向其中添加数据了。

(3)、我们接下来需要对原始数据进行转化。

(4)、表格定义已经完成，现在只是将其装填在Grid中：

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>控制表单学习</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="ext/ext-core.js"></script>
        <script src="ManagerList.js"></script>
	</head>
    <body>
    	<form>
        	<div id="show">啦啦啦！啦啦啦！我是卖报的小行家</div>
        </form>
    </body>
</html>

ManagerList.js代码：

	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
		Ext.SSL_SECURE_URL  = 'ext/resources/images/default/s.gif';

		Ext.QuickTips.init();
		
		var data=[
			['client_setup1','安装包','3.0.0.1','2014.07.31','是'],
			['client_setup2','安装包','3.0.0.1','2013.06.31',''],
			['client_setup3','插件包','3.0.0.1','2012.05.31','是'],
			['client_setup4','插件包','3.0.0.1','2011.04.31','']		  
		];
		
			var sm=new Ext.grid.CheckboxSelectionModel({
			checked:true									   
		});
		
		var cm=new Ext.grid.ColumnModel([
			sm,
			{header:'名称',dataIndex:'name'},
			{header:'类型',dataIndex:'type'},
			{header:'版本',dataIndex:'version'},
			{header:'上传时间',dataIndex:'time'},
			{header:'当前升级包',dataIndex:'nowPackage'}								 
		]);
												
		var store = new Ext.data.Store({
			proxy:new Ext.data.MemoryProxy(data),
			reader:new Ext.data.ArrayReader({},[
				{name:'name'},
				{name:'type'},
				{name:'version'},
				{name:'time'},
				{name:'nowPackage'}									
			])
		});
		store.load();
		
		var tbar=new Ext.Toolbar([
			
			{text:"添加",id:"add",handler:function(){add();}},
			{text:"查看"},
			{text:"删除"}						  
		]);
		var grid=new Ext.grid.GridPanel({
			renderTo:'show',
			store:store,
			cm:cm,
			sm:sm,
			tbar:tbar
		});
	});
	function add(){
		alert("OK");
	}

-----------------------------------------------------------------------------------------

注意：

1、网页一定要引入 <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

否则会出现EXTJS图片显示不出来的！