Extjs 学习总结

最近一阶段学习了extjs 把最近学习的内容总结一下，以供以后工作需要时使用 关于extjs 副客户端的使用情况总结如下：

A.学习extjs主要做关于extjs 的页面处理，页面展示 extjs 常用的有一下几种:

                    Formpael 使用

  1.    Formpanel 主要包括用户的登录，注册等内容  Formpanel 可以放关于登录 注册等一些实用的组件，例如：textfield ,datefield,  combobox,  htmlEdit, 等一些常用的组件 同是extjs 自带的有对用户输入数据合法性验证的属性 ，下面举一例：

源代码如下：

   

Ext.onReady(function(){
Ext.QuickTips.init();
bodySyle:"margin-top:100px";
Ext.form.Field.prototype.msgTarget="side";

var date=[[1,"夏"],[2,"雨"]];
var proxy=new Ext.data.MemoryProxy(date);
var name=new Ext.data.Record.create(
[
 {
    name:"cid",
    type:"int",
    mapping:0
 },{
    name:"cname",
    type:"string",
    mapping:1
 }
])

var reader=new Ext.data.ArrayReader({},name);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true
})

var combox=new Ext.form.ComboBox({
fieldLabel:"选择",
id:"combox",
store:store,
mode:"local",
displayField:"cname",
valueField:"cid",
triggerAction:"all"
})

var name=new Ext.form.TextField({
name:"name",
fieldLabel:"姓名",
allowBlank:false,
blankText:"请输入姓名，姓名不能为空"
})

var password=new Ext.form.TextField({
name:"password",
fieldLabel:"密码",
allowBlank:false,
blankText:"请输入密码，密码不能为空",
inputType:"password"
})

var man=new Ext.form.Radio({
name:"rdosex",
checked:true,
boxLabel:"男",
inputValue:"1"
})

var girl=new Ext.form.Radio({
name:"rdosex",
boxLabel:"女",
inputValue:"2"
})

var group=new Ext.form.RadioGroup({
fieldLabel:"性别",
name:"rdosex",
items:[man,girl],
width:200
}
)

var email=new Ext.form.TextField({
fieldLabel:"邮箱",
name:"email",
vtype:"email",
vtypeText:"请输入正确的邮箱格式"
})

var time=new Ext.form.TimeField({
fieldLabel:"时间",
name:"time",
minValue:"8:00am",
maxValue:"18:00pm"
})

var time1=new Ext.form.DateField({
fieldLabel:"时间",
name:"aa",
//vtype:"datarange",
//vtypeText:"请选择时间",
format:"y/m/d"
})

var html=new Ext.form.HtmlEditor({
fieldLabel:"编辑",
name:"html",
width:500
})

var subbutton=new Ext.Button({
text:"提交",
handler:function(){
var name=form.getForm().findField("name").getValue();
var password=form.getForm().findField("password").getValue();
Ext.MessageBox.alert("提示","用户名是"+name+";密码是："+password)
}
})

var reset=new Ext.Button({
text:"重置",
handler:function(){
form.getForm().reset();
}
})

var form=new Ext.form.FormPanel({
items:[name,password,email,group,combox,time,time1,html],
buttons:[subbutton,reset],
width:700,
height:400,
labelAlign:"left",
frame:true,
buttonAlign:"center"
})

var window=new Ext.Window({
title:"注册页面",
items:[form],
width:700,
height:700,
renderTo:Ext.getBody()
})
window.show();
});

Store使用

 2.    Store 的使用 在extjs 中store 占有重要地位 数据的加载，更新全都和它打交道，主要获取数据 Store的主要用法必须有 proxy , reader 两个属性 proxy 代理主要用来加载数据 而reader 主要用来对数据类型的声明 及一些后台对应关系的管理，此二者缺一不可，

此组件主要用于其他组件需要获取数据或从后台获取的使用，Store从后台获取数据必须指定reader中 的mapping属性对应后台中bean的属性名，分页显示主要在Store lode中指定每页显示的条数以及从哪一条开始算起指定    使用情况请看一例说明：

 }              

源代码如下:

 Ext.onReady(function(){
  var date=[[1,"我"],[2,"吃"],[3,"西"],[4,"红"],[5,"柿"]];
  var date1=[{"cid":1,"cname":"我"},{"cid":2,"cname":"吃"},{"cid":3,"cname":"西"},{"cid":4,"cname":"红"},{"cid":5,"cname":"柿"}];
var proxy=new Ext.data.MemoryProxy(date);

var name=new Ext.data.Record.create([
{
name:"cid",
type:"int",
mapping:0
},{
name:"cname",
type:"string",
mapping:1

]
)
var reader=new Ext.data.ArrayReader({},name);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true
})



var combox=new Ext.form.ComboBox({
id:"combox",
store:store,
mode:"local",
renderTo:Ext.getBody(),
displayField:"cname",//显示值
valueField:"cid",//真实值
triggerAction:"all",
listeners:{//事件监听器
'select':function(){//触发点击事件
var bb=combox.getValue();
alert(bb);
var aa=Ext.get("combox").dom.value;
alert(aa);
}

}

})
});              

GridPanel使用

3.    Gridpanel 使用 不用想大家都应该清楚此组件在extjs 中的用处 此组件的用处对数据进行表格展示 使用此组件必须定义store 属性  以上说过凡是需要数据的组件都离不开store 可谓store 在此中占有半壁江山，Gridpanel 主要可用于对数据进行排版 格式书写 以及分页显示 在使用Gridpanel 时应注意以下几种情况：

a. 使用时应声明表格的列使用 声明列时 列属性的dataindex 属性必须对应store 中reader设置中的name 值只用这样才能将数据绑定到Gridpanel 中 否则不然。 

b. 在使用Grid panel 分页时必须指定 tbar 配置，此配置实际上是一组件 Toolbar 主要用来对表格尾部添加分页内容 切注意在toolbar 中必须设置pageSize 配置项 msg 配置项 方可进行分页 例如：msg:"本页显示从｛0｝到｛1｝之间的数据 ，共｛2｝条数据",

c. Gridpanel 主要使用情况有点击表头自动对数据进行排序功能添加特殊符号 在表格内对数据进行修改以及在表格内对数据进行下拉菜单显示

Gridpanel 的使用情况请看一下例子表明：

    myData);

源代码如下：

       Ext.onReady(function(){
var check=new Ext.grid.CheckboxSelectionModel();//添加checkbox框

var myData=[
["3m Co",71.72,"0.02","0.003","9/1 12:00am"],
["Alcoa Inc",29.01,"0.42","1.47","9/1 12:00am"],
["Altria Group Inc",83.81,"0.28","0.34","9/1 12:00am"],
["American Express Company",52.55,"0.01","0.02","9/1 12:00am"],
["American International Group,Inc",64.13,"0.31","0.49","9/1 12:00am"]
];
var proxy=new Ext.data.MemoryProxy(
//添加数据类型
var number=new Ext.data.Record.create(
[
{
 name:"Company",
 type:"string",
},{
 name:"Price",
 type:"float"
},{
 name:"Change",
 type:"string"
},{
 name:"%Change",
 type:"string"
},{
 name:"Datetime",
 type:"string"
}
]
);
var reader=new Ext.data.ArrayReader({},number);

var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true
});

var col=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),check,
{
header:"公司",
width:100,
dataIndex:"Company"
},{
header:"价格",
width:100,
dataIndex:"Price",
sorttable:true,//排序功能
renderer:"usMoney"
},{
header:"百分比",
width:100,
dataIndex:"Change",
sorttable:true
},{
header:"比率",
width:100,
dataIndex:"%Change",
sorttable:true
},{
header:"时间",
width:100,
dataIndex:"Datetime",
format:'y/m/d',
id:"demo"
}
]
);

var grid=new Ext.grid.GridPanel({
title:"公司列表",
store:store,
width:600,
cm:col,
sm:check,
autoHeight:true,
renderTo:Ext.getBody(),
autoExpandColumn:"demo"
});
});

TreePanel 使用

4.    Treepanel 主要使用于系统中的树形图结构 对结构树形图创建树形图结构创建主要用TreeNode 对结构添加子节点，主要情况是节点可以套节点 组成树形结构，在树形图中必须创建root 配置 可以调方法添加 TreePane主要可以配置属性的伸缩状态 一般使用都显示连接线 此配置TreePanel 自带有属性 可以自行查Api 得到结果 可以说我们能想到的extjs 都帮我们实现了 Treepanel 可以添加复选框 对树形结构进行全选 TreePanel 可以自我的对自己进行 添加，修改，删除操作 Treepanel 的使用情况大家可以看以下例子:

   

源代码如下：

js:

Ext.onReady(function(){
var tree=Ext.tree;
var root=new tree.TreeNode({
text:"根节点",
singleClickExpand:true//是否单击打开
})

var node=new tree.TreeNode({
text:"一级节点"
})

var node1=new tree.TreeNode({
text:"二级节点"
})

var node2=new tree.TreeNode({
text:"三级节点"
})

var node3=new tree.TreeNode({
text:"一级节点子节点"
})

var node4=new tree.TreeNode({
text:"一级节点子节点"
})

var node5=new tree.TreeNode({
text:"一级节点子节点"
})

var node6=new tree.TreeNode({
text:"二级节点子节点"
})

var node7=new tree.TreeNode({
text:"二级节点子节点"
})

var node8=new tree.TreeNode({
text:"三级节点字节点"
})

node.appendChild([node3,node4,node5]);
node1.appendChild([node6,node7]);
node2.appendChild([node8]);

root.appendChild([node,node1,node2]);


var treepanel=new tree.TreePanel({
title:"树",
width:500,
height:300,
lines:true,//设置true有线条
animate:true,
bbar:[{
text:"上",
tooltip:"向上选择一个节点",
tooltipType:"qtip",
handler:function(){
var model=treepanel.getSelectionModel();//获取选择模型
model.selectPrevious();
 }
},{
text:"获取选中名称",
handler:function(){
var model=treepanel.getSelectionModel();
var aa=model.getSelectedNode();//获取选中的node
if(aa){
Ext.Msg.alert("",aa.text);
}

}

},{
text:"添加同级节点（前）",
handler:function(){
Ext.Msg.prompt("输入","请输入新节点名称",function(btn,txt){
if(btn=="ok"){
var newNode=new tree.TreeNode({text:txt});
var selNode=treepanel.getSelectionModel().getSelectedNode();
if(!selNode){
Ext.Msg.alert("提示","在添加之前请先选择节点");
}else{
if(selNode.id==treepanel.getRootNode().id){
Ext.Msg.alert("提示","根节点不能添加同级节点");
}else{
selNode.parentNode.insertBefore(newNode,selNode);
}
}
}
})
}
},{
text:"添加同级节点（后）",
handler:function(){
Ext.Msg.prompt("输入","请输入新节点名称",function(btn,txt){
 //alert(btn);
if(btn=="ok"){
var newNode=new tree.TreeNode({text:txt});
var selNode=treepanel.getSelectionModel().getSelectedNode();
//alert(selNode);
if(!selNode){
Ext.Msg.alert("提示","在添加之前请先选择节点");
}else{
if(selNode.id==treepanel.getRootNode().id){
Ext.Msg("提示","根节点不能添加同级节点");
}else{
selNode.parentNode.insertBefore(newNode,selNode.nextSibling);
}
}
}
})
}
},{
  text:"删除节点",
  handler:function(){
  Ext.MessageBox.confirm("删除节点","您确定要删除吗？",function(btn,txt){
  if(btn=="yes"){
  var newNode=new tree.TreeNode({text:txt});
  var selNode=treepanel.getSelectionModel().getSelectedNode();
  if(selNode.id==treepanel.getRootNode().id){
  Ext.Msg.alert("提示","根节点不能删除");
  }else{
  selNode.remove();
  }
  }
  })
  }
}

]
})
treepanel.setRootNode(root);
treepanel.render("aa");
treepanel.expandAll();
});

html:

 <div id="aa"></div>