TabPanel、TreePanel、GridPanel几种布局方式常见的小问题

深入探讨前端与后端技术关键点

最新推荐文章于 2024-08-31 10:28:49 发布

最新推荐文章于 2024-08-31 10:28:49 发布 · 419 阅读

文章标签：

#ux #json

JS框架专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了前端开发与后端开发的核心概念、关键技术与实践应用，包括HTML、CSS、JavaScript等前端技术，PHP、Java、MySQL等后端技术，以及Vue、React等主流前端框架的应用。此外，还介绍了树状结构的数据展示、右键菜单配置、分页功能实现、网格面板数据渲染与后台交互等高级技巧。通过实例解析，帮助开发者深入理解并掌握这些技术要点。

TabPanel

1、当tab标签超过一定浏览器的宽度时，使之自动加载滚动条autoScroll:true;

设置滚动条为自动，此前若需要看到效果必须要设置enableTabScroll属性为真

2、添加右键菜单：

使用extjs的右键组件TabCloseMenu

{
                xtype:'tabpanel',
                id:'tabs',
                autoScroll:true,
                region:'center', // a center region is ALWAYS required for border layout
                deferredRender:false,
                activeTab:0, // first tab initially active
                items:centPortal,
                plugins:new Ext.ux.TabCloseMenu({
                    closeTabText:'关闭当前标签',
                    closeOtherTabsText:'关闭其他标签',
                    closeAllTabsText:'关闭所有标签'
                })
}

3、从iframe中操作父界面

3.1、如果是得到，则直接使用parent.Ext.getCmp()；或者是parent.变量名

3.2、如果是添加一个组件到父容器，则需要在新建 new parent.Ext.panel();

GridPanel

1、本地数据分页

2、后台交互分页

//数据显示的表格
      var tabs = new Ext.grid.GridPanel({
          region:'center',
          title:'学生信息列表',
          width:750,
          height:400,
          margins:{top:5,right:0,bottom:0,left:50},
          cm:cm,
          store:store,
          bbar: new Ext.PagingToolbar({
              pageSize:15,
              store:store,
              displayInfo:true,
              displayMsg:'显示第{0}条到第{1}条记录，总共有{2}条记录',
              emptyMsg:'当前还没有记录'
          }),
          sm:sm
      });
      store.load({params:{start:0,limit:15}});
//这里的start，和limit就是用来分页的两个参数

3、gridpanel中对前台数据格式转换（渲染）：

3.1、在列模型中转换数据格式（不会改变store中实际值）

renderer的配置参数有：value, metaData, record, rowIndex, colIndex, store

//一般情况下的渲染，用于根据类型判断显示文字信息
{header :'日志类型',dataIndex:'userLogType',width:150,renderer:function(value){
                    return value==1?'系统日志':'用户日志'
                }}

//这个渲染是会在鼠标滑过单元格时，弹出提示框显示该单元格信息
renderer:function(){
                return '<div ext:qtip='+val+'></div>';
            }

//主要用于该列的自动换行显示
renderer:function (v, meta) {
   meta.attr = 'style="white-space:normal;"';
   return v;
}

3.2、在store中转换数据格式（改变了store中的值）

{name: 'rating', type: 'int', convert: function(v, rec) {
                   if (rec[3] < 0) return 2;
                   if (rec[3] < 1) return 1;
                   return 0;
               }
            }

3.3、在gridpanel中渲染该函数，用来鼠标指定的列显示缩略图

function thumbnail(data, metadata, record, rowIndex, columnIndex, store) {
        var url = store.getAt(rowIndex).get('filePath');
       //var fileName = store.getAt(rowIndex).get('fileName');
        //qtitle标题 qtip:内容
        var img = "<img src='<%=WebConfig.WEB_DOWNLOAD%>/" + url + "' width='100%' >";
        var displayText = '<div ext:qtitle="图片信息" ext:qtip="' + img + '" >' + data + '</div>';
        return displayText;
    }

4、在后台排序

当使用后台排序时，需要注意的是使用的请求方式需要时proxy形式而不是url的形式，然后开启remoteSort为true，此时如果gridpanel中的该列允许排序的话，后台就会接收到相应的排序参数，分别为sort、dir

treePanel

1、树节点的attributes属性

ext的treePanel中有一个attributes属性，他是一个包含后台赋予的值的对象，后台的必须参数有Id（表示该节点）、text（节点名称）

注意：后如果想要从后台传递其他参数给这个树节点，那么只需呀附加Id、text之外的键值对即可，不需要将该键值对再次封装在attributes属性中

2、生成一棵树

function newTree(rVisible)
    {
        var tree = new Ext.tree.TreePanel({
            animate:true,//是否有动画效果
            useArrows:false,//是否有下三角
            lines:false,//是否显示树的那根线
            autoScroll:true,
            rootVisible: rVisible,//是否显示树的根节点（当树的值是后台传过来的时候，系统会自动加载一个根节点，然后将闯过来的数据作为子节点载入）
            loader: new Ext.tree.TreeLoader(),//树的节点的加载器，用来自动组装一棵树，等价于：dataUrl:'**.**'
            root:new Ext.tree.AsyncTreeNode(),//树的根节点
            containerScroll: true,//为树加载滚动条
            enableDD:true,//设置树是否可以拖拽，默认为false
            border: false,
            width: 250,
            height: 300,
            enableDD:true,
            listeners: {    //树的监听器，监听当树的节点的选项改变时触发
                'render': function(tp){
                    tp.getSelectionModel().on('selectionchange', function(tree, node){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
                        }
                    })}
            }
listeners: {    //监听树节点的单击事件
                'render': function(tp){
                    tp.on(click, function(node,e){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
                        }
                    })}
            }
        })
 
        return tree;
    }

3、根据后台传的值构建一棵树

tree.getLoader().dataUrl = ' ';

//取值的url，传过来的值是一个json对象的数组[{id:'1',text:'a',leaf:true},{id:'2',text:'b',children:[{text:'2.1',leaf:true}]}]

或者在构建树的时候，直接指定属性dataUrl

tree.root.reload();//刷新树结构

4、前台确定一棵树

var entTree = newTree(true);
    var entBase = new Ext.tree.AsyncTreeNode({
        text:'企业基本信息',
        draggable:false,
        id:'entBase',
        children:[{
            text:'企业基本信息',
            iconCls:'nav',
            draggable:false,
            id:'entMsg',
            leaf:true
        },{
            text:'企业规章制度',
            iconCls:'nav',
            draggable:false,
            id:'entRule',
            leaf:true
        }]
    })
    entTree.setRootNode(entBase);//设置树的根节点
    entTree.expand(true,true);//设置树是否展开、是否有动态效果

5、树的右键菜单配置方式

contextMenu:new Ext.menu.Menu({
            items:[
                {
                    id:'refresh-node',
                    text:'刷新',
                    iconCls:'silk-table-refresh'
                },
                {
                    id:'show-node',
                    text:'查看详情',
                    iconCls:'silk-table-go'
                },
                {
                    id:'add-node',
                    text:'新增信息',
                    iconCls:'silk-table-row-insert'
                },
                {
                    id:'edit-node',
                    text:'修改信息',
                    iconCls:'silk-table-edit'
                },
                {
                    id:'delete-node',
                    text:'删除信息',
                    iconCls:'silk-table-row-delete'
                }
            ],
            listeners:{
                itemclick:function (item) {
                    switch (item.id) {
                        case 'refresh-node':
                            refresh();
                            break;
                        case 'show-node':
                            show(this);
                            break;
                        case 'add-node':
                            add(this);
                            break;
                        case 'edit-node':
                            edit(this);
                            break;
                        case 'delete-node':
                            del();
                            break;
                    }
                }
            }
        })
写完右键菜单后，还要在树的监听器里设置
contextmenu:function (node, e) {
                node.select();
                var c = node.getOwnerTree().contextMenu;
                c.showAt(e.getXY());//设置坐标
            }