ajax的js开发的目录规范 (目录框架下载)
ajax的js开发的目录规范:
├──framework //存放RIA框架资源
│ ├──ext2.0.2
│ └──dojo1.1.0
├──modules //存放项目模
│ ├──oa-admin
│ ├──oa-news
│ └──upload
├──images //存放项目专用图片
├──css //存放项目样式
├──widget //存放项目公用组件
│ └──UploadDialog
└──request //server端URL或代码
index.html
login.html
The article is from: http://meetrice.yo2.cn/
Saturday, September 13, 2008
extJs 2.0学习笔记(Ext.Panel篇一)
老实不客气的说：没有Panel，就没有extjs的盛名。那些最常见的UI组件都是继承自它。暴爽的东西啊。我就在想，这么好的东西怎么会出现得这么晚呢？
在这一篇中，将详细讲一讲Ext.Panel的方方面面。
现在遇到了一些问题：
一、显示的问题
事实上，这个问题是所有组件的问题，凡是从Ext.Component继承的类都面临这个问题。
例如，我写了一行这样的代码，但是没有任何结果：
var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});
这是什么原因呢？
if(this.applyTo){
this.applyToMarkup(this.applyTo);
delete this.applyTo;
}else if(this.renderTo){
this.render(this.renderTo);
delete this.renderTo;
}
这几行代码是写在Ext.Component的构造函数中的。它标示如果applyTo、renderTo有值，就会在对象创建的时候直接呈现，如果这两值都没有，那就只能手工调用render函数了。
然而这有一个问题，applyTo与renderTo倒底有什么区别，它们取值类型可以是哪些呢？看代码。
applyTo的情况依赖于this.applyToMarkup来实现呈现。找到它的代码：
applyToMarkup : function(el){
this.allowDomMove = false;
this.el = Ext.get(el);
this.render(this.el.dom.parentNode);
}
而renderTo的情况是直接依赖于this.render(this.renderTo)的。这两者的差别很明显了，但是，这个问题到目前还不能说清楚，我发现，Ext.Panel最后生成的代码如下：
<div id="panel2" class="x-panel" style="width: 300px;">
<div id="ext-gen14" class="x-panel-header x-unselectable" style="-moz-user-select: none; cursor: move;">
<span id="ext-gen18" class="x-panel-header-text">这是标题栏
</div>
<div id="ext-gen15" class="x-panel-bwrap">
<div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容！！！</div>
</div>
</div>
由上代码可知，panel的代码总是外面一个容器：x-panel，然后里面几个，这儿是：x-panel-header、x-panel-bwrap。现在可以说一说renderTo与appplyTo的区别了。
renderTo与applyTo的传入参数的数据类型与Ext.get的参数类型一样，可是dom、string、Element。它们最大的不同在于容器，这个容器不是指x-panel所对应的元素，而是指x-panel所对应元素的父元素。由源代码可知：
当为applyTo时，它调用render(this.el.dom.parentNode);可见，x-panel的容器为applyTo对应元素的父元素。也即是applyTo事实上就是x-panel。而renderTo时，renderTo所对应元素是x-panel的容器。如何验证这个问题呢？请到FireBug中看一看就晓得了。
上面说了一大通，我再总结一下：
renderTo：对应x-panel所在div的父元素；
applyTo：对应x-panel所在div本身。
二、Ext.Component的几个极其重要的成员
component.el：在panel中相当于x-panel所对应的div。它表示Component所对应的最外层html元素。
component.id：在panel中相当于x-panel所对应的div的id，如果x-panel所在div没有id，那么就自己分配一个。
component.container：它在panel中相当于x-panel所在div的父元素。即x-panel的容器。也即是：component的容器。
如果没有分清楚这个问题，那么下面代码会产生问题：
var p=new Ext.Panel({title:'my title',width:300,height:300,renderTo:'panel1'});
console.info(Ext.getCmp('panel1'));
结果如何呢？undefined！！
为什么是这样呢，因为，getCmp用的id即是component.id。而这个id对应的是x-panel所在元素的id或者自由分配的。而renderTo对应的元素不是x-panel。而是x-panel的父亲。这个问题极容易搞错。
这儿的两个问题其实都是Ext.Component那里的。下一篇正式研究一下Ext.Panel的API了。
The article is from: http://tianmoboping.blog.163.com/blog/static/15739532200842862913151/
在这一篇中，将详细讲一讲Ext.Panel的方方面面。
现在遇到了一些问题：
一、显示的问题
事实上，这个问题是所有组件的问题，凡是从Ext.Component继承的类都面临这个问题。
例如，我写了一行这样的代码，但是没有任何结果：
var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});
这是什么原因呢？
if(this.applyTo){
this.applyToMarkup(this.applyTo);
delete this.applyTo;
}else if(this.renderTo){
this.render(this.renderTo);
delete this.renderTo;
}
这几行代码是写在Ext.Component的构造函数中的。它标示如果applyTo、renderTo有值，就会在对象创建的时候直接呈现，如果这两值都没有，那就只能手工调用render函数了。
然而这有一个问题，applyTo与renderTo倒底有什么区别，它们取值类型可以是哪些呢？看代码。
applyTo的情况依赖于this.applyToMarkup来实现呈现。找到它的代码：
applyToMarkup : function(el){
this.allowDomMove = false;
this.el = Ext.get(el);
this.render(this.el.dom.parentNode);
}
而renderTo的情况是直接依赖于this.render(this.renderTo)的。这两者的差别很明显了，但是，这个问题到目前还不能说清楚，我发现，Ext.Panel最后生成的代码如下：
<div id="panel2" class="x-panel" style="width: 300px;">
<div id="ext-gen14" class="x-panel-header x-unselectable" style="-moz-user-select: none; cursor: move;">
<span id="ext-gen18" class="x-panel-header-text">这是标题栏
</div>
<div id="ext-gen15" class="x-panel-bwrap">
<div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容！！！</div>
</div>
</div>
由上代码可知，panel的代码总是外面一个容器：x-panel，然后里面几个，这儿是：x-panel-header、x-panel-bwrap。现在可以说一说renderTo与appplyTo的区别了。
renderTo与applyTo的传入参数的数据类型与Ext.get的参数类型一样，可是dom、string、Element。它们最大的不同在于容器，这个容器不是指x-panel所对应的元素，而是指x-panel所对应元素的父元素。由源代码可知：
当为applyTo时，它调用render(this.el.dom.parentNode);可见，x-panel的容器为applyTo对应元素的父元素。也即是applyTo事实上就是x-panel。而renderTo时，renderTo所对应元素是x-panel的容器。如何验证这个问题呢？请到FireBug中看一看就晓得了。
上面说了一大通，我再总结一下：
renderTo：对应x-panel所在div的父元素；
applyTo：对应x-panel所在div本身。
二、Ext.Component的几个极其重要的成员
component.el：在panel中相当于x-panel所对应的div。它表示Component所对应的最外层html元素。
component.id：在panel中相当于x-panel所对应的div的id，如果x-panel所在div没有id，那么就自己分配一个。
component.container：它在panel中相当于x-panel所在div的父元素。即x-panel的容器。也即是：component的容器。
如果没有分清楚这个问题，那么下面代码会产生问题：
var p=new Ext.Panel({title:'my title',width:300,height:300,renderTo:'panel1'});
console.info(Ext.getCmp('panel1'));
结果如何呢？undefined！！
为什么是这样呢，因为，getCmp用的id即是component.id。而这个id对应的是x-panel所在元素的id或者自由分配的。而renderTo对应的元素不是x-panel。而是x-panel的父亲。这个问题极容易搞错。
这儿的两个问题其实都是Ext.Component那里的。下一篇正式研究一下Ext.Panel的API了。
The article is from: http://tianmoboping.blog.163.com/blog/static/15739532200842862913151/
Ext 2.0.1 Grid 增删改 & DWR 1 实例 - 操作数据库版本
Ext 2.0.1 Grid 增删改 & DWR 1 实例 - 操作数据库版本
友情提示 : 下载微软网盘文件时关闭下载工具 , 否则你将得到错误的文件 , 双击 EXE 会出来 DOS 窗口 . 正确操作是点击文件名后能看到显示下载链接和文件大小等信息 .
微软的网盘终于又能用了,5G空间呢,微软就是有钱啊.
http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/AJAX/extdwrgrid.zip 1.13 MB 导入MyEclipse即可,也可用其它开发工具.
运行截图:
这次是真的了, 和数据库同步操作,不过,有安全性问题,建议加密码,一共有20个字段.后台数据库:
image
导出为Excel:
(略)
image
Ext + DWR + Mysql 简单例子
包括5个例子:
EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本)
EXT 2 表格编辑控件示例(静态页面，Java和DWR无关版本)
Netbeans 6 开放文档团队在线通讯录(Ext + DWR + MySQL)
DWR 检查注册用户名是否存在
模拟DWR 引擎通过反射调用类中方法并获取返回值
要运行此例子,请先
1. 运行 table.sql 在 Mysql 中建表;
2. 修改 src/dao/UserManagerNB.java 的
public static Connection getConnection() 方法, 来连接到
正确的数据库地址.
3. 发布项目并键入地址 http://localhost:8080/extdwrgrid/ 访问;
4. 要修改例子, 注意绝大多数页面都是 UTF-8 编码的, 例如 .js 文件.
附件:
DWR通过AJAX后台POST调用参数,然后使用反射技术调用类的方法并获得结果.
后台发送的AJAX请求:
POST dwr/exec/JUserManager.checkUserExits.dwr HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Referer: http://192.168.1.200:8000/ajaxreview/ajax_reg_dwr.html
Content-Type: text/plain
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: 192.168.1.200:8000
Content-Length: 146
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: JSESSIONID=F0D84EF983957A66162555D3AB966A29
callCount=1
c0-scriptName=JUserManager // 类
c0-methodName=checkUserExits// 方法名
c0-id=358_1212542593797
c0-param0=string:%E6%B8%A9%E5%AE%B6%E5%AE%9D // 编码过的参数值
xml=true
后台返回的值:
头部
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=ISO-8859-1
Transfer-Encoding: chunked
Date: Wed, 04 Jun 2008 01:23:14 GMT
正文(responseText)是方法的执行结果
var s0="\u5BF9\u4E0D\u8D77, \u6B64\u7528\u6237\u540D\u4E0D\u5141\u8BB8\u6CE8\u518C";
DWREngine._handleResponse('358_1212542593797', s0);
BeanSoft@126.com (刘长炯)
http://beansoft.blogjava.net/
其他一些关于DWR的文章:
http://www.blogjava.net/ITdavid/archive/2008/03/14/186202.html
http://clarancepeng.javaeye.com/blog/146549
http://www.javaeye.com/post/403073
http://tmsoft.lsxy.com/index.php?id=600&load=read
The article is from: http://www.cnblogs.com/meetrice
友情提示 : 下载微软网盘文件时关闭下载工具 , 否则你将得到错误的文件 , 双击 EXE 会出来 DOS 窗口 . 正确操作是点击文件名后能看到显示下载链接和文件大小等信息 .
微软的网盘终于又能用了,5G空间呢,微软就是有钱啊.
http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/AJAX/extdwrgrid.zip 1.13 MB 导入MyEclipse即可,也可用其它开发工具.
运行截图:
这次是真的了, 和数据库同步操作,不过,有安全性问题,建议加密码,一共有20个字段.后台数据库:
image
导出为Excel:
(略)
image
Ext + DWR + Mysql 简单例子
包括5个例子:
EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本)
EXT 2 表格编辑控件示例(静态页面，Java和DWR无关版本)
Netbeans 6 开放文档团队在线通讯录(Ext + DWR + MySQL)
DWR 检查注册用户名是否存在
模拟DWR 引擎通过反射调用类中方法并获取返回值
要运行此例子,请先
1. 运行 table.sql 在 Mysql 中建表;
2. 修改 src/dao/UserManagerNB.java 的
public static Connection getConnection() 方法, 来连接到
正确的数据库地址.
3. 发布项目并键入地址 http://localhost:8080/extdwrgrid/ 访问;
4. 要修改例子, 注意绝大多数页面都是 UTF-8 编码的, 例如 .js 文件.
附件:
DWR通过AJAX后台POST调用参数,然后使用反射技术调用类的方法并获得结果.
后台发送的AJAX请求:
POST dwr/exec/JUserManager.checkUserExits.dwr HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Referer: http://192.168.1.200:8000/ajaxreview/ajax_reg_dwr.html
Content-Type: text/plain
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: 192.168.1.200:8000
Content-Length: 146
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: JSESSIONID=F0D84EF983957A66162555D3AB966A29
callCount=1
c0-scriptName=JUserManager // 类
c0-methodName=checkUserExits// 方法名
c0-id=358_1212542593797
c0-param0=string:%E6%B8%A9%E5%AE%B6%E5%AE%9D // 编码过的参数值
xml=true
后台返回的值:
头部
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=ISO-8859-1
Transfer-Encoding: chunked
Date: Wed, 04 Jun 2008 01:23:14 GMT
正文(responseText)是方法的执行结果
var s0="\u5BF9\u4E0D\u8D77, \u6B64\u7528\u6237\u540D\u4E0D\u5141\u8BB8\u6CE8\u518C";
DWREngine._handleResponse('358_1212542593797', s0);
BeanSoft@126.com (刘长炯)
http://beansoft.blogjava.net/
其他一些关于DWR的文章:
http://www.blogjava.net/ITdavid/archive/2008/03/14/186202.html
http://clarancepeng.javaeye.com/blog/146549
http://www.javaeye.com/post/403073
http://tmsoft.lsxy.com/index.php?id=600&load=read
The article is from: http://www.cnblogs.com/meetrice
访问Ext.data.store的数据
这两天查阅了N多资料,看了很多的论坛,打算解决如何从store里面读取数据的问题,一开始我可以从Json中返回的store里面读取数据,但是在如何使用xml就不可以.而我要的恰恰是如何从xml里面读取数据,所以一直在寻找这样类似的方法,我们可以从它的api里面看到 store.getAt(0)这样的方法,但是如果我们直接这么使用的话,就会出现一个错误,提示getAt函数所包含的数据为空,那么我们跟踪js的时候也无法得到具体的数据.这里是使用firefox来跟踪js的执行过程的,非常好用,建议大家也使用.对于Ext来说,可能它的文档就是一个给非常熟悉 Ext的人员使用的参考,而对于初学者而言,参考价值不大,而且有的时候还容易误导,所以我们学习Ext的时候一直处于磕磕绊绊的状态.或者这也是人家将来要收费的原因吧,毕竟是开源的东西,而且Ext的文档提示的属性和方法是没有错误的.
今天无意中在Ext的论坛里面发现了一个和我同样问题的帖子,最后他解决了问题,我也顺便解决了.但是他没有把他的代码粘贴出来,所以我现在把我的代码粘贴出来供参考.
这是Xml文档
<?xml version="1.0" encoding="utf-8" ?>
<Items>
<item input="Connect.Host" value="value.Connect.Host" />
<item input="Connect.DB" value="value.Connect.DB" />
<item input="Connect.User" value="value.Connect.User" />
<item input="Connect.Password" value="value.Connect.Password" />
</Items>
下面是js代码:
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'test1.xml', method: 'GET'}),
reader: new Ext.data.XmlReader(
// records will have an "Item" tag
{record: 'item'},
[
// set up the fields mapping into the xml doc to extract *attributes*
{name: 'value', mapping: '@value'},
{name: 'input', mapping: '@input'}
])
});
ds.on('load',AJAX_Loaded, this, true);//这里需要注意
ds.load();
function AJAX_Loaded(){
alert(ds.getCount());
for (var i = 0; i < ds.getCount(); i++) {
var rec = ds.getAt(i);
alert("value = '" + rec.get("value"));
alert("input = '" + rec.get("input"));
}
}
需要注意的是,我们获得数据是通过load事件来实现的,这是很多人错误的地方,也就是说,如果我们不通过事件还是无法获得数据.
The article is from: http://www.cnblogs.com/meetrice
今天无意中在Ext的论坛里面发现了一个和我同样问题的帖子,最后他解决了问题,我也顺便解决了.但是他没有把他的代码粘贴出来,所以我现在把我的代码粘贴出来供参考.
这是Xml文档
<?xml version="1.0" encoding="utf-8" ?><Items> <item input="Connect.Host" value="value.Connect.Host" /> <item input="Connect.DB" value="value.Connect.DB" /> <item input="Connect.User" value="value.Connect.User" /> <item input="Connect.Password" value="value.Connect.Password" /></Items>下面是js代码:
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'test1.xml', method: 'GET'}),
proxy: 
reader: new Ext.data.XmlReader( // records will have an "Item" tag {record: 'item'}, [ // set up the fields mapping into the xml doc to extract *attributes* {name: 'value', mapping: '@value'}, {name: 'input', mapping: '@input'} ])
}); ds.on('load',AJAX_Loaded, this, true);//这里需要注意 ds.load(); function AJAX_Loaded(){ alert(ds.getCount()); for (var i = 0; i < ds.getCount(); i++) { var rec = ds.getAt(i); alert("value = '" + rec.get("value")); alert("input = '" + rec.get("input"));
} }需要注意的是,我们获得数据是通过load事件来实现的,这是很多人错误的地方,也就是说,如果我们不通过事件还是无法获得数据.
The article is from: http://www.cnblogs.com/meetrice
学extjs笔记 -- David Chen
以下是学习过程中记下来的一些小技巧,一定会有错,不保证全对,因为我也刚接触,只是将我的经验列一下.
1) 如果组件之间嵌套比较多的话，外面的Contaner 应尽量不要使用的 renderTo的属性来加载到某个div的id中,
应尽量在定义了Contaner后，用obj.render('id') 这个方面来加载组件，可以减少错误
2) 最好在最外层的Contaner组件(不是页面html,是extjs组件)定义with,不用定义height, 然后里面的一些组件
比如panel等可以定义autoWidth: true, autoHeight: true, 就可以使用整个显示自动适应了。
3) 要用到鼠标移上后出现提示框的都要先执行这句 Ext.QuickTips.init();
4) 注意 Ext.onReady 的使用
5) 如果有全局函数或全局的属性，不要放到onReady里面，即使只有onReady里面的对象调用了某个function,不然会提示
函数未定义，在onReady外定义全局函数，如果函数用到某个对象，可以用Ext.getCmp来取得ExtComponent,同样的，
即使是全局变量也一样，如果有iframe要调用parent中的变量，那更加要注意，这个变量只能定义在onReady外面，而
且该变量的赋值不能在onReady的结束处用getCmp等来赋值，要在某个具体的动作才赋值，比如按纽点击等。
6) 如果TabPanel有tab是用html: iframe 来载入页面，但是要在iframe的页面中关闭TabPanel中
的某一个tab,可以使用如下的方法实现
TabPanel所以页面,定义一个全局变量 var tabPanel = null; 然后在 Ext.onReady 中给这个 变量赋
值,那么在iframe页面就可以通过 parent.tabPanel来取得这个变量了,然后再调用 tabPanel.remove('')
就可以删除TabPanel中的某一个tab
7)
Ext.get( 'htmlId' ); // 和document.getElementById('');不一样，返回的是Element
Ext.get( 'htmlId' ).dom; // 和document.getElementById('');一样，返回的是HTMLElement
Ext.getCmp( 'cmpId' ); // 返回的是 Ext.Component
Ext.isEmpty( Mixed value ); // 判断是否是空，包括空字符串
Ext.num( Mixed value, Number defaultValue ); // 判断是否是数字,不是就返回defaultValue
Ext.id( [Mixed el], [String prefix] ); // 生成一个唯一的id,
// 包 Ext.util.Format , 包括多种的格式化函数
8)
render();
// 空参数，可以使组件的子组件，或包含的panel等复位，不包括孙组件
// 比如viewport中的panel拖放后，调用后,panel会回到原来的地方
9)
bodyStyle: 'width:100%', 定义组件宽度100%
viewConfig: { forceFit: true }, // 如果grid的column指定了width的值,最好使用这个强制宽度
layout: 'fit',
iconCls: '', //用这个可以控制panel的title与左边框的距离
10)
用layout:'table'时记住要指明一下
layoutConfig: {
// The total column count must be specified here
columns: 3
},
11)
使panel自动适应面板的方法
首先定义一个 viewPort( {layout: 'border', items: []} ), 然后在items中添加一个
panel( {region: 'center', layout: 'fit', items:[]} ), 然后再在panel的items中添加
一个gridPanel( {autoHeight: true, layout: 'fit'} ), 这样就可以了
以下这个代码是非ViewPort使Panel自适应代码:
var panel = new Ext.Panel({
id: 'subpanel',
layout: 'column',
frame: true,
layoutConfig: { columns: 2 },
items: [
{ columnWidth: .5, layout: 'fit', items: [ tabpanel ] },
//tabpanel中不要指定width,但可以autoHeight: true, 但不能autoWidth: true,
{ columnWidth: .5, layout: 'fit', html:'
' }
]
});
12)
{contentEl:'tab1', title:'Tab 1'},
// contentEl 一般是页面中有一个div,id为tab1, 那么当前的panel会自动将该div做为子元素纳入管理
13)js动态组装json
var datacolumn= [];
for (var i = 0; i < colcount; i++) {
datacolumn.push(['value'+i,'text'+i]);
}
var storecolumn = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : datacolumn
});
The article is from: http://www.cnblogs.com/meetrice
1) 如果组件之间嵌套比较多的话，外面的Contaner 应尽量不要使用的 renderTo的属性来加载到某个div的id中,
应尽量在定义了Contaner后，用obj.render('id') 这个方面来加载组件，可以减少错误
2) 最好在最外层的Contaner组件(不是页面html,是extjs组件)定义with,不用定义height, 然后里面的一些组件
比如panel等可以定义autoWidth: true, autoHeight: true, 就可以使用整个显示自动适应了。
3) 要用到鼠标移上后出现提示框的都要先执行这句 Ext.QuickTips.init();
4) 注意 Ext.onReady 的使用
5) 如果有全局函数或全局的属性，不要放到onReady里面，即使只有onReady里面的对象调用了某个function,不然会提示
函数未定义，在onReady外定义全局函数，如果函数用到某个对象，可以用Ext.getCmp来取得ExtComponent,同样的，
即使是全局变量也一样，如果有iframe要调用parent中的变量，那更加要注意，这个变量只能定义在onReady外面，而
且该变量的赋值不能在onReady的结束处用getCmp等来赋值，要在某个具体的动作才赋值，比如按纽点击等。
6) 如果TabPanel有tab是用html: iframe 来载入页面，但是要在iframe的页面中关闭TabPanel中
的某一个tab,可以使用如下的方法实现
TabPanel所以页面,定义一个全局变量 var tabPanel = null; 然后在 Ext.onReady 中给这个 变量赋
值,那么在iframe页面就可以通过 parent.tabPanel来取得这个变量了,然后再调用 tabPanel.remove('')
就可以删除TabPanel中的某一个tab
7)
Ext.get( 'htmlId' ); // 和document.getElementById('');不一样，返回的是Element
Ext.get( 'htmlId' ).dom; // 和document.getElementById('');一样，返回的是HTMLElement
Ext.getCmp( 'cmpId' ); // 返回的是 Ext.Component
Ext.isEmpty( Mixed value ); // 判断是否是空，包括空字符串
Ext.num( Mixed value, Number defaultValue ); // 判断是否是数字,不是就返回defaultValue
Ext.id( [Mixed el], [String prefix] ); // 生成一个唯一的id,
// 包 Ext.util.Format , 包括多种的格式化函数
8)
render();
// 空参数，可以使组件的子组件，或包含的panel等复位，不包括孙组件
// 比如viewport中的panel拖放后，调用后,panel会回到原来的地方
9)
bodyStyle: 'width:100%', 定义组件宽度100%
viewConfig: { forceFit: true }, // 如果grid的column指定了width的值,最好使用这个强制宽度
layout: 'fit',
iconCls: '', //用这个可以控制panel的title与左边框的距离
10)
用layout:'table'时记住要指明一下
layoutConfig: {
// The total column count must be specified here
columns: 3
},
11)
使panel自动适应面板的方法
首先定义一个 viewPort( {layout: 'border', items: []} ), 然后在items中添加一个
panel( {region: 'center', layout: 'fit', items:[]} ), 然后再在panel的items中添加
一个gridPanel( {autoHeight: true, layout: 'fit'} ), 这样就可以了
以下这个代码是非ViewPort使Panel自适应代码:
var panel = new Ext.Panel({
id: 'subpanel',
layout: 'column',
frame: true,
layoutConfig: { columns: 2 },
items: [
{ columnWidth: .5, layout: 'fit', items: [ tabpanel ] },
//tabpanel中不要指定width,但可以autoHeight: true, 但不能autoWidth: true,
{ columnWidth: .5, layout: 'fit', html:'
]
});
12)
{contentEl:'tab1', title:'Tab 1'},
// contentEl 一般是页面中有一个div,id为tab1, 那么当前的panel会自动将该div做为子元素纳入管理
13)js动态组装json
var datacolumn= [];
for (var i = 0; i < colcount; i++) {
datacolumn.push(['value'+i,'text'+i]);
}
var storecolumn = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : datacolumn
});
The article is from: http://www.cnblogs.com/meetrice
Subscribe to:
Posts (Atom)