ext js4学习小结2

最新推荐文章于 2021-08-05 22:16:09 发布

jackyrongvip

最新推荐文章于 2021-08-05 22:16:09 发布

阅读量129

点赞数

分类专栏： ajax/web相关文章标签： ext

ajax/web相关专栏收录该内容

409 篇文章 1 订阅

订阅专栏

一面板
1）autoload加载项
Ext.create('Ext.panel.Panel',{
title:'面板加载远程页面',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
autoScroll : true,//自动显示滚动条
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
bodyPadding: 5,
autoLoad :'page1.html',//自动加载面板体的默认连接
}）；
2）加载本地HTML
......//其他不变，同上
contentEl :'localElement',//加载本地资源
。。。。。。。。。。。。。。

<div id="localElement"> ..................
3)加载自定义HTML
var htmlArray = ['<HTMl>..............'];
Ext.create('Ext.panel.Panel',{
...............
html:htmlArray.join(''),
});

二面板布局
1）AUTO布局，默认的
2）fit布局，使子元素充满容器
3）折叠布局，accordion，跟传统的折叠一样
4）layout:card,任何时候只有一个子面板处在显示状态
items: [{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
},{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}],
buttons:[{
text : '上一页',
handler : changePage
},{
text : '下一页',
handler : changePage
}]
});
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}

4)anchor锚点布局
根据容器大小为其所包含的子面板进行定位的布局，如果容器大小发生变化，所有子面板位置也会发生变化，

自动渲染。
A 百分比定位
items: [{
anchor : '50% 50%',//设置子面板的宽高为父面板的50%
B OFFSET定位
anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素，子到父面板的右边和下边都为10象

素
C 绝对定位，X，Y坐标
D 使用百分比指定列宽
items: [{
title:'子面板一',
columnWidth:.3//指定列宽为容器宽度的30%

},{
title:'子面板二',
columnWidth:.7//指定列宽为容器宽度的70%
}]
E TABLE表格布局
items: [{
title:'子面板一',
width : 150,
colspan : 3//设置跨列
},{
title:'子面板二',
rowspan : 2,//设置跨行
height : 100
},
F BORDER布局：东南西北
G HBOX，VBOX布局：
Ext.create('Ext.panel.Panel',{
title : 'Ext.layout.container.HBox布局示例',
layout:{
type : 'hbox',//水平盒布局
align : 'stretch'//子面板高度充满父容器
},
height : 150,
width : 300,
frame : true,
renderTo: Ext.getBody(),
items: [{
title: '子面板一',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板二',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板三',
flex : 2,
html : '1/2宽(flex=2)'
}]
});
});

H VIEWPORT：代表浏览器窗口的整个显示区域
静态TAB：
Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例',
frame : true,
height : 150,
width : 300,
activeTab : 1,//默认激活第一个tab页
renderTo: Ext.getBody(),
items: [
{title: 'tab标签页1',html : 'tab标签页1内容'},
{title: 'tab标签页2',html : 'tab标签页2内容'},
{title: 'tab标签页3',html : 'tab标签页3内容'},
{title: 'tab标签页4',html : 'tab标签页4内容'},
{title: 'tab标签页5',html : 'tab标签页5内容'}
]
});
});
动态TAB：
Ext.onReady(function(){
var tabPanel = Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例（动态添加tab页）示例',
frame : true,
height : 150,
width : 300,
activeTab : 0,//默认激活第一个tab页
renderTo: Ext.getBody(),
items : [{
title: 'tab标签页1',
html : 'tab标签页1内容'
}],
buttons : [{
text : '添加标签页',
handler : addTabPage
}]
});
function addTabPage(){
var index = tabPanel.items.length + 1;
var tabPage = tabPanel.add({//动态添加tab页
title: 'tab标签页'+index,
html : 'tab标签页'+index+'内容',
closable : true//允许关闭
})
tabPanel.setActiveTab(tabPage);//设置当前tab页
}
});

二常用工具函数
1 ext.core.element
<div id="the-id">　　　通过取得Element id为“the_id”的div并为该Div绑定一些事件，如：为鼠标移过该

Div时改变样式表等</div>

要动态对该DIV增加行为：
Ext.onReady(function(){
var el = Ext.get("the-id");
var appendEl = Ext.get("the-id-append");
function fn1(){
Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
}
el.addCls("special-css");//为元素添加样式表
el.focus();//将焦点移到el元素上
el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
el.addClsOnClick("click-css");//为点击事件添加和移除css类
el.setWidth(240);//将元素的宽度设为100相素
el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn

函数、

2 ext.select()
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"示例",
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='height:200px'>我的id是sub3</div>"
});
var el = Ext.select(["div1"],true);
el.on("click",function tes(){
Ext.Msg.alert("提示","您点击了id为'div1'的节点");
});
});

3 查询选择器
//选择元素为div其id为div1的节点的数组
var el = Ext.query("#div1");
//选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
var targetD = Ext.query('div[property1=pro1]');

4 EXT.each()
//对集合进行字符串的追加
Ext.each(array,fn); //fn实际上为一个回调处理函数
//为集合加入元素,这些元素为从0到9的数字
for(i=0;i<10;i++){
array.push(i);
}
function fn(item,index,allItems){
//如果跌代对象的元素值大于5则终止跌代执行
if(item>5){
return false;
}else{
//为集合元素中值小于5的元素进行字符串的追加
allItems[index] = item+"_st"
}
}

5 EXT.APPLY复制
//定义两个对象,一个目标对象一个源对象
var tarObj = {},srcObj
srcObj = {};
srcObj.name = "源对象";
srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
srcObj.width = "130px";
//调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
Ext.apply(tarObj,srcObj);
Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
tarObj.name+"<br>text:"+tarObj.text+
"<br>width:"+tarObj.width);

6 EXT.ENCODE //转为JSON形式
ext.decode //还原
var person={name:'Tom',age:24}
Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串

7 ext.typeof()，判断参数的类型
8 DOMHELPER

1、append
html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'
});
Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);

2 applystyles:
Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-

weight:bold;");

3 insertafter(insertbefore)
//给指定的div1在其后插入一个新的div
Ext.core.DomHelper.insertAfter(Ext.get("div1"),{
id: 'item2', html: "<div id='div2'

style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"
html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的

Div对象</div>'

4 inserfirst(跟insertbefor有点象）
5 inserthtml ,插入HTML
6 overwrite 覆盖
9 DOM QUERY示例
html : '<div id="div0" style="height:200px;padding:5px;"><div id="div1">我是第一个Div的内容

</div><div id="div2" ><div id="div3">我是第二个Div的内容</div></div></div>'
//获到所有的以id为div0为父节点的div

var tarArry = Ext.query('#div0 div');
//选择那些不包含id为div1的节点
var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
//选择那些包含id为div1的节点
var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
//对对数组中是否包含指定id的节点进行判断
var isInclude = Ext.core.DomQuery.is(except,'#div0');
//选择以id为divo的所有div子点中的第一个节点
var selectNode = Ext.core.DomQuery.selectNode("#div0 div");

10 EXt.util.css
1 createstylesheet
html : '<div style="height:160px;padding:5px;" class="myclass">我是内容部分</div>'
//通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起
Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
var cssObj = Ext.util.CSS.getRule(".myclass",true);
Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜

色:'+cssObj.style.color);

2 Ext.util.CSS.swapStyleSheet
这个可以动态改变文档的样式
var themes = [
{theme:'默认', css:'ext-all.css'},
{theme:'黑色',css: 'ext-all-access.css'},
{theme:'红色',css: 'ext-all-red.css'}];
//创建主题数据模型
Ext.regModel('Theme', {
fields: ['theme','css']
});
//创建主题数据源
var themeStore = Ext.create('Ext.data.Store',{
model : 'Theme',
data : themes
});
//创建主题切换选择框
var themeChange = Ext.create('Ext.form.ComboBox',{
id : 'themeChange',
width : 150,
labelWidth : 60,
labelSeparator :'：',//分隔符
fieldLabel:'样式选择',
store : themeStore,
editable : false,
triggerAction: 'all',//单击触发按钮显示全部数据
store : themeStore,//设置数据源
displayField : 'theme',
valueField : 'css',
queryMode: 'local',//本地模式
value:'ext-all.css',//默认风格
listeners : {
'collapse' : function() {
Ext.util.CSS.swapStyleSheet('theme', '../../ext-

4.0/resources/css/'+ this.getValue());
contentIframe.window.themeChange(this.getValue());
}
}

11 ext.util.format方法
var str = "<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table

string</td></tr></table>";
var str1 = " aV";
var dat = new Date();
var str2 = 12345;
var str3 = 1.2345;
Ext.Msg.alert(
"提示",
"原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)

+"<br><br>"+
"原strl为:"+str1+"<br>进行capitalize(str1)后

为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
"<br>原dat为:<br>"+dat+"<br>"+
"进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
"注意调用htmlDecode(str)后展现出来的是一个带边框的表

格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
"原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
"<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
"<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)

12 ext.util.mixedcollection

var item = new Ext.util.MixedCollection();
var arr = [];
arr.push({name:'a'});
arr.push({name:'b'});
item.addAll(arr);
Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对

象后item中的对象个数为:'+item.length);

13 ext.util.taskrunner
提供多线程定时服务。
Ext.onReady(function(){
var task ={
run:function(){
Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将

停止!');
},
interval:1000,
repeat:5,
duration:10000
};
var task1 = new Ext.util.TaskRunner();
task1.start(task);
});
14 EXT.KEYNAV为键盘提供的简便方法
Ext.onReady(function(){
var panel = new Ext.Panel({
title : '键盘绑定对象示例',
width : '260px',
renderTo : 'div1',
html : '<div style="width:200px;height:160px;padding:10px;"><div id="id01"

style="background-color:#3399FF;height:20px;">请点击我,然后<br>按键盘" enter"键</div></div>'
});
var el = Ext.get("id01");
var nav = new Ext.KeyNav(el,{
"left" : function(e){
alert('向左的按键被按下了');
//this.moveLeft(e.ctrlKey);
},
"right" : function(e){
alert('向右的按键被按下了');
//this.moveRight(e.ctrlKey);
},
"enter" : function(e){
alert('回车键被按下了');
//this.save();
},
scope : el
});
nav.enable();
还可以用new Ext.KeyMap来监听CTRL，ALT，SHIFT等键盘；