1、一般都要加载三个文件
ext-all.css
ext-all.js
ext-base.js
2、一般情况下每一个用户的ExtJS 都是从Ext.onReady();开始
3、组件的使用
new Ext.Window();就可以创建一个窗口
new Ext.GridPanel()就可以创建一个表格
var panel = new Ext.Panel
({title:"hello",width:300,height:200,html:"Hell,easyif open source"});
panel.render("hello");
//render方法后面的参数表示页面上的div元素id,也可以直接在参数中通
过renderTo参数来省略用render
方法,只需要在构造函数的参数中添加一个renderTo属性即可
New Ext.Panel
({renderTo:"hello",width:300,height:200,html:"Hello,easyif open
source"});
4、addListener 方法代码中,第一个参数表示时间名称,第二个参数表示事件处
理器或整个响应函数
<script type="text/javascript">
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get(btnAlert).addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="aler框" />
5、一个事件添加多个响应函数
<script type="text/javascript">
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnalert").on("click",a);
});
</script>
<input id="btnAlert" type="button" value="aler框" />
6、ExtJS还支持事件延迟处理或时间缓存
<script type="text/javascript">
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
</script>
<input id="btnAlert" type="button" value="aler框" />
7、一个页面中只能有一个ViewPort实例
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按纽1"},
{text:"按纽2"}]
}]
});
});
</script>
8、Viewport常用的border布局
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north",
height:50,
html:"网站后台管理系统"},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"},
{xtype:"tabpanel",
region:"center",
items:[{title:"面板1"},{title:"面板2"}]
}
]
});
});
</script>
ExtJS 学习日记<1>
最新推荐文章于 2020-12-19 12:35:34 发布