程序博客网 > 如何购买阿里云空间

extjs4.0---- treepanel和gridpanel示例

来源：互联网 发布：如何购买阿里云空间 编辑：程序博客网 时间：2024/06/05 20:45



a.jsp:

[javascript] view plaincopy
  1.   <script type="text/javascript">  
  2.  Ext.onReady(function(){  
  3. var p = new MyApp.view.ui.zPanel;  
  4. p.render(Ext.getBody());  
  5.   
  6.  });  
  7.    
  8.   </script>  


a.js:

[javascript] view plaincopy
  1. //数据准备Grid  
  2. var _rzdatas = [  
  3.             {id:'12',name:'zhangsan',username:'张三',organization:'河北省',status:'生效',handle:'<a href="yhgl_bj.jsp"><span class="sd" style="text-decoration:none">用户编辑</span></a>|<a href="#"><span  style="text-decoration:none">重置密码</span></a>|<a href="#"><span  style="text-decoration:none">解锁</span></a>',contact:'222',time:new Date(1979,09,13)},  
  4.             {id:'13',name:'lisi',username:'李四',organization:'北京市',status:'失效',handle:'<a href="#"><span class="sd" style="text-decoration:none">用户编辑</span></a>|<a href="#"><span  style="text-decoration:none">重置密码</span></a>|<a href="#"><span  style="text-decoration:none">解锁</span></a>',contact:'333',time:'new Date(1978,10,01)'},  
  5.             {id:'14',name:'wangwu',username:'王五',organization:'天津市',status:'生效',handle:'<a href="#"><span class="sd" style="text-decoration:none">用户编辑</span></a>|<a href="#"><span  style="text-decoration:none">重置密码</span></a>|<a href="#"><span  style="text-decoration:none">解锁</span></a>',contact:'444',time:'new Date(1981,01,01)'},  
  6.             {id:'15',name:'shiqian',username:'时迁',organization:'海南省',status:'生效',handle:'<a href="#"><span class="sd" style="text-decoration:none">用户编辑</span></a>|<a href="#"><span  style="text-decoration:none">重置密码</span></a>|<a href="#"><span  style="text-decoration:none">解锁</span></a>',contact:'444',time:'new Date(1981,01,01)'}  
  7.             ];  
  8.                   
  9.         //注册数据模型Grid      
  10.         Ext.regModel("rzmodel",{  
  11.                 fields:['name','username','organization','status','handle','contact','time:'],  
  12.                 proxy:{  
  13.                     //type:"ajax",  
  14.                     //url:"t/jccxQuery.do?type=1",  
  15.                     //reader:{type:"json",root:"ds",totalProperty: "total"}  
  16.                     type:'memory',  
  17.                     //data:_xxdatas,  
  18.                     reader:'json'  
  19.                 }  
  20.         });   
  21.           
  22.         //准备数据集Grid  
  23.         var _rzStore = new Ext.data.Store({  
  24.             autoLoad:true,  
  25.             data:_rzdatas,  
  26.             model:'rzmodel',  
  27.             pageSize:2  
  28.         });  
  29.           
  30.         //store  
  31.         var store = Ext.create('Ext.data.TreeStore', {  
  32.              root: {  
  33.                 expanded: true, //true展开  
  34.                 id:'-1',  
  35.                 children: [  
  36.                     { 'text': "系统", expanded: true,   
  37.                          children:[{'text':'北京市','leaf':false,'id':'1',  
  38.                                 children:[  
  39.                                 { 'text':'海淀区','leaf':true,'id':'12'},  
  40.                                 { 'text':'朝阳区','leaf':true,'id':'13'}]   
  41.                                   },  
  42.                                   {'text':'河北省','leaf':false,  
  43.                                 children:[  
  44.                                 { 'text':'石家庄','leaf':true,'id':'14'},  
  45.                                 { 'text':'唐山市','leaf':true,'id':'15'}]   
  46.                                   },  
  47.                                  {'text':'海南省','leaf':false,  
  48.                                 children:[  
  49.                                 { 'text':'海口市','leaf':true,'id':'16'}]   
  50.                              }]  
  51.                     }  
  52.                     ]}  
  53.             }  
  54.            );  
  55.              
  56. Ext.define('MyApp.view.ui.zPanel', {  
  57.           extend: 'Ext.panel.Panel',  
  58.         title :'布局示例',  
  59.              layout:{  
  60.               type:'table', //table布局  
  61.                columns:2     
  62.             },  
  63.              
  64.             frame :true,  
  65.             height : 700,  
  66.             width : 1600,  
  67.               
  68.             renderTo: Ext.getBody(),  
  69.             defaults : {  
  70.                 bodyStyle:'background-color:#FFFFFF;',  
  71.                 height : 500,  
  72.                 frame : true  
  73.             },    
  74.               
  75.             items: [{  
  76.                     xtype: 'treepanel',  
  77.                     id:'t_id',  
  78.                     title: '基础查询',  
  79.                     width:150,  
  80.                     colspan:1,   //占一列  
  81.                        split:true,  
  82.                     collapsible:true,  
  83.                     store: store,  
  84.                     rootVisible:false,//隐藏根节点  
  85.                     //useArrows: true,//在树节点中使用箭头  
  86.                     renderTo: Ext.getBody(),  
  87.                       
  88.                     listeners:{  
  89.                       itemclick:function(m,r,d,e,t){  
  90.                         var ids=r.store.getAt(e).get("id");  
  91.                         //创建Ajax代理  
  92.                         var ajaxProxy = new Ext.data.proxy.Ajax({  
  93.                             url : '../../page/xt_yhgl/yhgl_lbServer.jsp',  
  94.                             model: 'rzmodel',  
  95.                             reader: 'json'  
  96.                                });  
  97.                         //创建请求参数对象  
  98.                         var operation = new Ext.data.Operation({  
  99.                             action: 'read',//设置请求动作为read,  
  100.                             id:ids  
  101.                         });  
  102.                         //读取数据  
  103.                         ajaxProxy.doRequest(operation,callBack);  
  104.                         //doRequest方法的回调函数  
  105.                         function callBack(operation){  
  106.                             //获取原始响应数据  
  107.                             var responseText = operation.response.responseText;  
  108.                               
  109.                             _rzStore.removeAll();  
  110.                             _rzStore.add(Ext.decode(responseText));  
  111.                               
  112.                         };  
  113.                      }  
  114.                    }  
  115.                      
  116.                    },{  
  117.          xtype:'gridpanel',  
  118.                     title: '列表',  
  119.                     width:900,  
  120.                     colspan:1,    
  121.                     autoScroll:true,  
  122.                     //表格上方部分  
  123.                       bodyCls:"gridheader",  
  124.                       
  125.                    tbar:[{  
  126.                         text:'显示全部',  
  127.                         handler:function(){  
  128.                         var msg = '';  
  129.                         var rows = me.getSelectionModel().getSelection();  
  130.                         for(var i = 0;i < rows.length;i++)  
  131.                         {  
  132.                             msg = msg + rows[i].get('number')+'\n';  
  133.                         }  
  134.                         alert(msg);  
  135.                         }  
  136.                         },{  
  137.                         text:'添加新用户',  
  138.                         //触发按钮事件，弹出窗口  
  139.                         listeners:{  
  140.                             click:function(){  
  141.                             var tjwindow = new (MyApp.view.ui.yhgl_tj);  
  142.                             tjwindow.show();  
  143.                       
  144.                             }  
  145.                         }  
  146.                    }],  
  147.                       
  148.                     renderTo: Ext.getBody(),  
  149.                     store: _rzStore,  
  150.             //定义表格前面空格  
  151.                  columnLines:true,  
  152.                            columns: [  
  153.                       //设置行号  
  154.                       Ext.create('Ext.grid.RowNumberer',{text : '', width : 35}),  
  155.                         {  
  156.                             xtype: 'numbercolumn',  
  157.                             dataIndex: 'id',  
  158.                             width:40,  
  159.                             style : 'text-align:center',  
  160.                             text: '序号'  
  161.                         },  
  162.                         {  
  163.                             xtype: 'gridcolumn',  
  164.                             dataIndex: 'name',  
  165.                             style : 'text-align:center',  
  166.                             text: '用户名'  
  167.                         },  
  168.                         {  
  169.                             xtype: 'gridcolumn',  
  170.                             dataIndex: 'username',  
  171.                             width:65,  
  172.                             style : 'text-align:center',  
  173.                             text: '用户姓名'  
  174.                         },  
  175.                         {  
  176.                             xtype: 'gridcolumn',  
  177.                             dataIndex: 'organization',  
  178.                             width:65,  
  179.                             style : 'text-align:center',  
  180.                             text: '所属组织'  
  181.                         },  
  182.                         {  
  183.                             xtype: 'gridcolumn',  
  184.                             dataIndex: 'status',  
  185.                             width:65,  
  186.                             style : 'text-align:center',  
  187.                             text: '用户状态'  
  188.                         },  
  189.                         {  
  190.                             xtype: 'gridcolumn',  
  191.                             dataIndex: 'handle',  
  192.                             width:140,  
  193.                             style : 'text-align:center',//居中  
  194.                             text: '操作/状态'  
  195.                         },  
  196.                         {  
  197.                             xtype: 'gridcolumn',  
  198.                             dataIndex: 'contact',  
  199.                             style : 'text-align:center',  
  200.                             text: '联系方式'  
  201.                         },  
  202.                         {  
  203.                             xtype: 'datecolumn',  
  204.                             dataIndex: 'time',  
  205.                             style : 'text-align:center',  
  206.                               
  207.                             text: '创建时间',  
  208.                             //格式化时间显示  
  209.                             renderer:Ext.util.Format.dateRenderer('Y-M-D h:m:d')  
  210.                         }  
  211.                     ],  
  212.                       bbar: {  
  213.                         xtype:"pagingtoolbar",  
  214.                         pageSize: 2,  
  215.                         id:"MyApp.view.ui.zPanel",  
  216.                         store:_rzStore,  
  217.                         beforePageText:"第 ",  
  218.                         afterPageText:"页，共 {0} 页",  
  219.                         firstText:"第一页",  
  220.                         prevText:"前一页",  
  221.                         lastText:"末页",  
  222.                         nextText:"下一页",  
  223.                         refreshText:"刷新",  
  224.                         emptyMsg:"没有要显示的数据",  
  225.                         displayInfo: true,  
  226.                         displayMsg:"<span style='font-size:13px;'>显示第{0}到{1}条,共{2}条</span>",  
  227.                         plugins:[Ext.create("Ext.ux.ProgressBarPager",{})],  
  228.                         listeners:{  
  229.                             change:function( pagebar,  pageData, eOpts){  
  230.                                 //alert(pageData);  
  231.                             }  
  232.                         }  
  233.                     },  
  234.                    viewConfig: {  
  235.                     forcceFit:true,  
  236.                     stripeRows:true  
  237.                     }  
  238.                 }]     
  239.                 
  240.         });  
  241.       
0 0
如何购买阿里云空间 如何购买阿里云空间
原创粉丝点击
热门IT博客
破解软件网站大全破解软件网站大全
网络合同网络合同
js清空input file内容
全国社保统筹 知乎
unity3d2017可以用java
安广网络客服电话淮南
伍迪艾伦 知乎
淘宝小铺名称能改吗
专业跑步软件
重庆美皇公司知乎
淘宝不能朋友代付
原生js设置data属性
js查找节点的方法
windows 系统错误
路由器mac地址过滤功能
unity3d圣典中文手册
js怎么写乘法表
电商可变数据印刷
备案是每一个域名
怎样做免费网络推广
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 永琪美容美发连锁店 北京美发学校 北京美甲培训 美发图 美容美发行业 美发技校 北京美甲学校 美发造型教程 美容化妆 北京美发培训 去哪学美发 天津美发学校 美发的 美容美甲学校 化妆美容 哪里学美甲好 专业美发学校 美发内容 美发男士发型 国内美发学校 美容美发招聘 美容美发系统 化妆美发 美甲培训哪里好 美容美发图片 培训美容美发 短碎刘海男让理发师一眼就懂 梦到别人给自己理发 梦见自己给自己理发 婺源理坑住宿 理坑 城田理加 结城理 金泰新理城 昆山北大资源理城 昆山北大资源理城论坛 理塘 理塘旅游 理塘草原 理塘草原旅游 理塘县城海拔

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里