extjs常见布局特点以及可编辑表格详解

最新推荐文章于 2017-03-19 20:09:03 发布

mask哥

最新推荐文章于 2017-03-19 20:09:03 发布

阅读量1.3k

点赞数

分类专栏： extjs4.0学习笔记文章标签： extjs html header function email stylesheet

本文链接：https://blog.csdn.net/crazy123456789/article/details/7804102

版权

extjs4.0学习笔记专栏收录该内容

34 篇文章 3 订阅

订阅专栏

     /*
       * 常见布局特点总结：
        column列布局把整个容器看成1列，放入子元素的时候，可以通过指定columnFWidth(百分比)或width(绝对像素的方式指定宽度);
        border布局分为：east,south、west、north、center，其中center区域必须设置;
        fit布局，子元素自动填满父容器；
        accordion布局（折叠布局）：布局中元素是可以折叠的;
        Table布局由类Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素按照类似普通html标签<table>排列。
        */

1.编写如下html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

2.编写

accordion.js(折叠布局js)

Ext.onReady(function() {
new Ext.Panel({
renderTo:"hello1",
title:"容器组件",
layout:"accordion",
width:500,
height:300,
layoutConfig:{
animate:true
},
items:[
{title:"子元素1",html:"元素1内容"},
{title:"子元素2",html:"元素2内容"},
{title:"子元素3",html:"元素3内容"},
{title:"子元素4",html:"元素4内容"}
]
});

});

    column.js(列布局js)
        Ext.onReady(function() {
        new Ext.Panel({
             renderTo:"hello",
             title:"容器组件",
             layout:"column",
             width:500,
             height:100,
             items:[
                     {title:"列1",width:100,html:"<div>hello</div>"},
                     {title:"列2",width:200},
                     {title:"列3",width:100},
                     {title:"列4",width:98}
                     ]
             });

});

table.js( 表格布局.js)

/*
* layoutConfig使用columns指定父容器分成3列，
* 子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。
*/

Ext.onReady(function() {
new Ext.Panel({
renderTo:"hello2",
title:"容器组件",
layout:"table",
width:500,
height:200,
layoutConfig:{
columns:3
},
items:[
{title:"子元素1",html:"这子元素1内容",rowspan:2,height:100},
   {title:"子元素2",html:"这子元素2内容",colspan:2,height:100},
    {title:"子元素3",html:"这子元素3内容",height:100},
     {title:"子元素4",html:"这子元素4内容",height:100}
]
});

});

editorgrid.js(可编辑表格.js)

Ext.onReady(function() {
   /**
    * 可编辑表格
    */

   var data = [{
      id : 1,
      name : "小王",
      email : "xiaowang@126.com",
      sex : "男",
      bornDate : "1992-5-6"
     }, {
      id : 2,
      name : "小李",
      email : "xiaoli@126.com",
      sex : "男",
      bornDate : "1992-5-6"
     }, {
      id : 3,
      name : "小兰",
      email : "xiaolan@126.com",
      sex : "女",
      bornDate : "1993-3-3"
     }];

   var store = new Ext.data.JsonStore({
      data : data,
      fields : ["id", "name", "email", "sex", {
         name : "bornDate",
         type : "date",
         dateFormat : "Y-n-j"
        }]
     });

   var colM = new Ext.grid.ColumnModel([{
      header : "姓名",
      dataIndex : "name",
      sortable : true,
      editor : new Ext.form.TextField()
     }, {
      header : "性别",
      dataIndex : "sex",
      sortable : true,
      editor : new Ext.form.ComboBox({
         transform : "sexList",
         triggerAction : "all",
         lazyRender : true

        })
     }, {
      header : "邮件",
      dataIndex : "email",
      sortable : true,
      editor : new Ext.form.TextField()
     }, {
      header : "出生日期",
      dataIndex : "bornDate",
      renderer : Ext.util.Format.dateRenderer("Y年m月d日"),
      sortable : true,
      editor : new Ext.form.DateField({
         format : "Y年m月d日"
        })
     }]);
   var grid = new Ext.grid.EditorGridPanel({
      renderTo : "grid3",
      cm : colM,
      store : store,
      title : "学生管理 ",
      width : 500,
      height : 200,
      autoExpandColumn : 3
     });

});

mask哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs常见布局特点以及可编辑表格详解

/* * 常见布局特点总结： column列布局把整个容器看成1列，放入子元素的时候，可以通过指定columnFWidth(百分比)或width(绝对像素的方式指定宽度); border布局分为：east,south、west、north、center，其中center区域必须设置; fit布局，子元素自动填满父容器；
复制链接

扫一扫