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()
          });

第七步：利用<iframe>标签动态进行页面的切换

var contentPanel = {
                  id: 'content-panel',
                  region: 'center',
                  layout: 'card',
                  margins: '2 5 5 0',
                  activeItem: 0,
                  border: false,
                  items: [{
                      id: 'contentPanel',
                      margins: '2 2 2 2',
                      border: false,
                      html:"<iframe id='iframe-content' frameborder='0' width='100%' height='100%' src='http://www.baidu.com'></iframe>"
                  }]
          };

tree.on("itemclick",function(tree,record,item,index,e,options){
              //alert(record.get('id'));
              document.getElementById("iframe-content").src ="/wbt/"+record.get('id')+".jspx";
          });