extjs初学程序,this.el.dom不是对象或为空

extjs初学程序,this.el.dom不是对象或为空,第1张

<html>

<head>

<title>girl</title>

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

<script type="text/javascript" src="js/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="text/javascript" src="js/examples.js"></script>

<script>

var cm = new Ext.grid.ColumnModel([{

header: '编号',

dataIndex: 'id'

},

{

header: '名称',

dataIndex: 'name'

},

{

header: '描述',

dataIndex: 'descn'

}])

var data = [['1', 'name1', 'descn1'], ['2', 'name2', 'descn2'], ['3', 'name3', 'descn3'], ['4', 'name4', 'descn4'], ['5', 'name5', 'descn5']]

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({},

[{

name: 'id',

mapping: 0

},

{

name: 'name',

mapping: 1

},

{

name: 'descn',

mapping: 2

}])

})

ds.load()

var grid = new Ext.grid.GridPanel({

ds: ds,

cm: cm

})

</script>

</head>

<body onLoad="grid.render('grid')">

<div id="grid"></div>

</body>

</html>

为什么会出现这个问题,给你分析下:

1,grid的el属性是内置的el对象,是不能修改的。

2,由于脚本的执行是在<body>载入前执行的,也就是说grid的容器div还未创建,所以你建的这个grid就不能渲染到body里面id为grid的容器里面。

3,grid.render 方法要为其填写参数。

ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

我的经验不多,不足之处望大家补充。

首先,IE对DOM的处理效率很低,而Ext3的控件dom嵌套了很多层,再加上控件的渲染方式可能不是最优的,所以渲染起来会卡。将要发布的Ext4.1经过整体重构,dom嵌套骤减,控件的渲染方式也经过了优化,所以渲染速度会有很大提升。这个只能等~~~

其次,内存释放需要注意以下几点:

1.window的销毁:如果创建window时不加renderTo, window会渲染到页面body中,如果自己不销毁的话会越积越多。

2.控件如果是渲染到dom元素上而不是Ext容器上,需要手动销毁。

3.创建出来的组件没被使用或没有渲染,也需要手动销毁。

4.自定义的组件如果还包含其他组件,需要自己实现销毁方法。

5.store用完以后需要销毁,可以直接用autoDestroy配置项。

其实js对象的销毁对速度影响不是特大,渲染才是大问题。保持一个干净dom比什么都强。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11455828.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存