ext js在列表下可以点击出现这行列表下面的子列表

最新推荐文章于 2025-07-09 13:37:34 发布

原创最新推荐文章于 2025-07-09 13:37:34 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ext

web 前端专栏收录该内容

29 篇文章

订阅专栏

在订单管理系统中，用户可以通过特定功能在一行行订单数据下直观地查看并操作追加订单，实现对订单的高效管理和追踪。

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

例子：

用户可以在订单的基础上追加订单，如今想在一行行订单数据下可以直观的看出那个订单有追加订单并且显示

如下图所示

{
               xtype     : 'actioncolumn',
               text        : '追加列表',
               width    : '40px',
                menuDisabled : true,
                sortable : false,
                items     : [{
                    action: 'order.appendorderlist',
                    icon: '../styles/images/elbow-plus-nl.gif',
                    tooltip: '追加订单列表',
                    handler: function (grid, rowIndex, colIndex, item, e, record, rowEl) {
                       var srcUrl = e.target.src;
                       var src = srcUrl.substring(srcUrl.lastIndexOf("/")+1,srcUrl.length);
                       if(src == "elbow-plus-nl.gif"){
                           e.target.src = srcUrl.replace("elbow-plus-nl.gif","elbow-minus-nl.gif");
                       }else{
                           e.target.src = srcUrl.replace("elbow-minus-nl.gif","elbow-plus-nl.gif");
                       }
                        this.fireEvent('itemclick', this, grid, rowIndex, colIndex, item, e, record, rowEl);
                    },
                    isDisabled: function(grid, rowIdx, colIdx, item, record) {
                        return !record.get('appendOrderNum');
                    }
               }]
           }

图片是这两个图片

Ext.define('Wenjoy.view.order.AppendOrderList', {
	extend : 'Ext.grid.Panel',
    alias : 'widget.orderappendorderlist',
	title:'追加到该订单下的订单列表',
	autoShow : false,
	border: true,
	autoScroll:true,
	columns: {
		items:[
				{xtype: 'rownumberer',sortable: false, width:30}, 
				{dataIndex:'name',text:"订单名称",sortable: false, width:120 },
				{dataIndex:'saleName',text:"理财经理", sortable: false, width:60},
				{dataIndex:'customerName',text:"客户名称", sortable: false,width:60 },
				{dataIndex:'orderStateLabel',text:"状态", sortable: false, width:70 },
				{xtype:'datecolumn', format:'Y-m-d H:i', text: '状态修改日期', dataIndex: 'updateStateDate', sortable: false},
				{dataIndex:'orderAmount',text:"金额(万)", xtype: 'numbercolumn', format:'0,000',  sortable: false, width:70 },
				{xtype:'datecolumn', format:'Y-m-d', dataIndex:'orderDate',text:"预约日期", sortable: false},
//				{dataIndex:'payAmount',text:"金额(万)", xtype: 'numbercolumn', format:'0,000',  sortable: false, width:70 },
//				{xtype:'datecolumn', format:'Y-m-d', dataIndex:'payDate',text:"打款日期", sortable: false},
				{xtype:'datecolumn', format:'Y-m-d H:i', text: '添加日期', dataIndex: 'addDate', sortable: false}
		],
	    defaults: {
	        flex: 1
	    }
	}
});