ExtJs布局的使用（附源码）

最新推荐文章于 2020-12-23 17:50:18 发布

漏气的可乐

最新推荐文章于 2020-12-23 17:50:18 发布

阅读量477

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Extjs 文章标签： Extjs Extjs布局树形结构嵌套布局的使用

本文链接：https://blog.youkuaiyun.com/weixin_43841301/article/details/99678956

Extjs 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍并展示了ExtJS框架中的多种布局方式，包括border、fit、accordion和form布局，同时深入探讨了表格、树形结构及表单组件的使用技巧，通过实际代码示例，帮助读者快速掌握ExtJS的高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    **其中包含了 border 表格布局，fit布局，accordion手风琴效果的布局，form布局，以及树形结构的使用。**
      话不多说直接上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css"/>
    <script src="ext-3.2.0/adapter/ext/ext-base-debug.js"></script>
    <script src="ext-3.2.0/ext-all-debug.js"></script>
    <script>
        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日"})
                }]);
            new Ext.Viewport({   //布局开始
                enableTabScroll: true,   //允许出现滚动条
                layout: "border",   //总体采用border布局
                items: [{
                    xtype: "tabpanel", //类型为选项面板
                    region: "center",   //居中
                    items: [
                        {
                            title: "电子邮件",
                            layout: "border",   //border布局
                            items: [{
                                region: "west",  // 向西
                                width: 200,
                                height: 200,
                                layout: "accordion", //手风琴的布局
                                layoutConfig: {animate: true}, //添加动画效果
                                collapsible: true,     //可折叠 允许伸缩
                                items: [{title: "邮件夹"}, {title: "邮件搜索"}, {title: "邮箱管理"}]
                            },
                                {
                                    region: "center",//居中
                                    layout: "fit",   //填满布局
                                    items: [
                                        new Ext.grid.EditorGridPanel({  //可编辑的表格
                                            cm: colM, store: store,
                                            title: "学生管理",
                                            tbar: [new Ext.Toolbar.TextItem('工具栏'),//添加文本工具栏
                                                {xtype: "tbfill"},      //类型  工具栏文件 将工具栏的的工具移至靠右
                                         //插入代码
                                                 {
                                                 pressed: false, text: "新窗口", handler: function () {  //点击时使用以下函数
                                                 //设置树的根节点以及其他其他节点
                                                 var root = new Ext.tree.TreeNode({ //创建树的节点
                                                 text: "root",         //定义一个树节点
                                                 id: "root",
                                                 checked: false,   //定义刚开始的复选框 为空
                                                 leaf: false         //有没有子节点
                                                 });
                                                 var c1 = new Ext.tree.TreeNode({
                                                 text: "费用相关",
                                                 id: "c1",
                                                 checked: false,
                                                 leaf: false
                                                 });
                                                 var c2 = new Ext.tree.TreeNode({
                                                 text: "目标用户",
                                                 id: "c2",
                                                 checked: false,
                                                 leaf: false
                                                 });
                                                 var c3 = new Ext.tree.TreeNode({
                                                 text: "受理渠道",
                                                 id: "c3",
                                                 checked: false,
                                                 leaf: false
                                                 });
                                                 root.appendChild(c1); //为root节点添加子节点c1
                                                 root.appendChild(c2);
                                                 root.appendChild(c3);
                                                 for (var j = 1; j < 4; j++) {  // 给每个子节点在添加四个子节点
                                                 c1.appendChild(new Ext.tree.TreeNode({ //为c1节点在添加子节点
                                                 text: "栏目" + j,
                                                 checked: false,
                                                 leaf: true
                                                 }));
                                                 c2.appendChild(new Ext.tree.TreeNode({
                                                 text: "栏目" + j,
                                                 checked: false,
                                                 leaf: true
                                                 }));
                                                 c3.appendChild(new Ext.tree.TreeNode({
                                                 text: "栏目" + j,
                                                 checked: false,
                                                 leaf: true
                                                 }));
                                                 }
                                                 var win = new Ext.Window({ //创建一个新窗口
                                                 title: "窗口",
                                                 width: 300,
                                                 tbar: [{xtype: "tbfill"}, {xtype: "tbbutton", text: "提交"}],//头部文件
                                                 collapsible: true,//面板伸缩
                                                 height: 300,
                                                 layout: {
                                                 type: 'vbox',  //采用vbox布局
                                                 align: 'center'   //居中属性
                                                 },
                                                 items: [
                                                 {xtype: "box", html: "<br>关注内容<br>"},
                                                 {xtype: "radio", name: "xh", boxLabel: "e9-1套餐", id: "r1"},
                                                 {xtype: "radio", name: "xh", boxLabel: "e9-3套餐", id: "r2"},   //采用单选框
                                                 {xtype: "box", html: "<br><br>"},
                                                 {
                                                 xtype: "treepanel", //采用树形结构
                                                 width: 200,
                                                 autoScroll: true,  //允许出现滚动条
                                                 autoHeight: true,  //自动调节高度
                                                 useArrows: true, //是否在树中使用Vista样式箭头，默认为false
                                                 animate: true,   //动画效果
                                                 loader: new Ext.tree.TreeLoader(),//树节点的加载器，默认为Ext.tree.TreeLoader
                                                 root: root,  //树的根节点
                                                 enableDD: false,// 是否支持拖拽效果
                                                 containerScroll: true,// 是否支持滚动条
                                                 rootVisible: false,//是否隐藏根节点,很多情况下，我false们选择隐藏根节点增加美观性
                                                 listeners: {   // 添加监听事件
                                                 'checkchange': function (node, checked) {
                                                 //自动选中子节点node.expand();
                                                 node.attributes.checked = checked; //改变复选框的选择
                                                 node.eachChild(function (child) {   //修改子节点
                                                 child.ui.toggleCheck(checked);   //子节点保持选中状态
                                                 child.attributes.checked = checked;
                                                 child.fireEvent('checkchange', child, checked);//触发  点击节点时  将复选框选中事件
                                                 });
                                                 }
                                                 }
                                                 }],
                                                 maximizable: false //是否支持最大化});
                                                 });
                                                 win.show();
                                                 }
                                                 },
                                                {xtype: "tbseparator"},//类型为工具栏分隔符
                                                {pressed: false, text: "添加"},//开关初始状态为关
                                                {xtype: "tbseparator"},
                                                {pressed: false, text: "保存"}],
                                            bbar: [{xtype: "tbfill"}, {//底部工具栏
                                                xtype: "tbbutton", // 定义一个按钮 名字为button1
                                                text: "button1"
                                            }, {xtype: "tbseparator"}, {xtype: "tbbutton", text: "button2"}],
                                            autoExpandColumn: 3   //自动扩展  下标为3的表格
                                        })]
                                }]
                        },
                        {title: "网络存储"},
                        {title: "日常安排"}]
                }]
            });
        });
    </script>
</head>
<body>
<select id="sexList">
    <option>男</option>
    <option>女</option>
</select>
</body>
</html>