Extjs4.0 Demo
第一步先搭建可以Mian框架，用来作为整体的布局：
Ext.create("Ext.panel.Panel",{
alias:'widget.mainlayout',
renderTo: Ext.getBody(),
width:900,
height:600,
defaults:{
split:true,
bodyStyle:'padding 1px'
},
layout:'border',//布局
items:[
{
title:'后台管理',
region:'west',//在布局的西面
xtype:'panel',
iconCls: 'icon-edit',
margins:'5,2,5,5,',//内间距
width:200,
collapsible:true,//面板可折叠
id:'west-tree',
layout:'fit',
items:[
tree
]
},{
title:'用户信息表',
region:'center',//在布局的西面
xtype:'panel',
iconCls: 'icon-del',
id:'center-grid',
layout:'fit',
margins:'5,5,5,0',//内间距]
items:[
contentPanel
]
}
]
});
第二步新建Model，相当于java里面的class
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:'username',type:'string',sortable:true},
{name:'id',type:'int',sortable:true},
{name:'name',type:'string',sortable:true},
{name:'pwd',type:'string',sortable:true},
{name:'rights',type:'int',sortable:true},
{name:'phone',type:'string',sortable:true},
{name:'photo',type:'string',sortable:true},
{name:'email',type:'string',sortable:true}
]
});
第三步简历动态代理，通过服务器后台提取数据
Ext.create("Ext.data.Store",{
model:'user',
storeId:'s_user',
proxy:{
type:'ajax',
url:"/wbt/userAation.jspx?func=getUserList",//ajax请求
reader:{
type:'json'//以json类型读写数据
},
writer:{
type:'json'
}
},
autoLoad:true
});
第四步，建立一个grid用来加载数据
var grid=Ext.create("Ext.grid.Panel",{
title:"表格1",//标题
frame:true,//面板渲染
//forceFit:true,//自动填充panel空白处,这个跟多选冲突的
width:670,
columns:[
{text:"id",dataIndex:'id',width:100},//列名
{text:"username",dataIndex:'username',width:100},
{text:"eamil",dataIndex:'email',width:350,
field:{
xtype:'textfield',
allowBlank:false
}//编辑列模式,这个可以该模式的
}
],//列模式的集合
tbar:[//表格的工具栏
{
xtype:'button',//别称
text:'添加',
iconCls: 'icon-add',//这里加图标，可以选择样式
},
{
xtype:'button',//别称
text:'删除',
iconCls: 'icon-del',
handler:function(buttonObj){
//得到gird方法1
//var grid=buttonObj.findParentByType("gridpanel");//通过类型找到父类
var grid=buttonObj.ownerCt.ownerCt;//ownerCT父级
//alert(grid.getStore().getCount());
var data=grid.getSelectionModel().getSelection();//得到被选择
if(data.length==0){//选择是否为0
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//第一步：现在得到ID的数组(name代替)
var st=grid.getStore();
var ids=[];//建立一个数组
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
});
//第二步：后台操作
Ext.Ajax.request({
url:'/wbt/delete.jspx',
params:{ids:ids.join(",")},
method:"POST",
timeout:2000,//延迟秒数
success:function(response,options){
//第三步：前端错做DOM进行删除(EXTJS)
Ext.Array.each(data,function(record){
st.remove(record);
});
}
});
}
}
},
{
xtype:'button',//别称
text:'保存',
iconCls:'icon-save'
},
{
xtype:'button',//别称
text:'查看',
iconCls: 'icon-save',
handler:function(buttonObj){
//得到gird方法1
//var grid=buttonObj.findParentByType("gridpanel");//通过类型找到父类
var grid=buttonObj.ownerCt.ownerCt;//ownerCT父级
//alert(grid.getStore().getCount());
var data=grid.getSelectionModel().getSelection();//得到被选择
if(data.length==0){//选择是否为0
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//第一步：现在得到ID的数组(name代替)
var st=grid.getStore();
var ids=[];//建立一个数组
Ext.Array.each(data,function(record){
ids.push(record.get('id'));
Ext.getCmp("winform").show();
Ext.getCmp("id").setValue(record.get('id'));
Ext.getCmp("username").setValue(record.get('username'));
Ext.getCmp("name").setValue(record.get('name'));
Ext.getCmp("phone").setValue(record.get('phone'));
Ext.getCmp("email").setValue(record.get('email'));
});
}
}
}
],
dockedItems:[//分页工具栏
{
xtype:'pagingtoolbar',
store:Ext.data.StoreManager.lookup('s_user'),
dock:'bottom',//放的位置
displayInfo:true
}
],
plugins:[//单原格编辑插件
Ext.create("Ext.grid.plugin.CellEditing",{
clickToEdit:2//写2就是双击
//接下去要重构列模式
//....到上面去改
})
],
selType:'checkboxmodel',//允许单选（选择模式）
multiSelect:true,//允许多选
renderTo:"gridDemo",//渲染到div中
store:Ext.data.StoreManager.lookup('s_user'),
});
});
第五步：写一个测试用的treeStore
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
//checked:是否能被选中
children: [
{ text: "影片管理", checked:false,expanded: true,id:'01', children: [
{ text: "座位管理", checked:false, leaf: true,id:'0101' },
{ text: "影片管理", checked:false, leaf: true,id:'0102'}
] },
{ text: "影院管理", checked:false,expanded: true,id:'02',children:[
{text:"影院信息", checked:false,leaf:true,id:'0201'},
{text:"最近活动", checked:false,leaf:true,id:'0202'}
] },
{ text: "用户管理", checked:false,expanded: true,id:'03',children:[
{text:"用户信息", checked:false,leaf:true,id:'getUserList'},
{text:"聊天管理", checked:false,leaf:true,id:'0302'}
] }
]
}
});
第六步：加载treeStore里面的数据，画出tree部分
var tree=Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 250,
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'footer',改变样式
items:[
{
xtype:'button',
text:'增加',
id:'add',
handler:function(b,e){
var tree=b.ownerCt.ownerCt;//得到tree
var nodes=tree.getChecked();
if(nodes.length==1){
var node=nodes[0];
node.appendChild({
text:"技术架构组", checked:false,leaf:true
});
}else{
alert('必须选择一个节点');
}
}},
{xtype:'button',text:'删除',id:'delete'},
{xtype:'button',text:'更新',id:'update'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开所有',
handler:function(b,e){
var tree=b.ownerCt.ownerCt;
tree.expandAll();//展开所有
}
},{
xtype:'button',
id:'allclose',
text:'收起所有',
handler:function(b,e){
var tree=b.ownerCt.ownerCt;
tree.collapseAll();//展开所有
}
}]
}],
store: store,
rootVisible:false,//控制显隐的属性
renderTo: Ext.getBody()
});
第七步：利用"
}]
};
tree.on("itemclick",function(tree,record,item,index,e,options){
//alert(record.get('id'));
document.getElementById("iframe-content").src ="/wbt/"+record.get('id')+".jspx";
});