ExtJs 怎么GridPanel有两层工具栏

最新推荐文章于 2021-02-06 18:43:39 发布
最新推荐文章于 2021-02-06 18:43:39 发布
阅读量416 收藏
点赞数
分类专栏： EXT JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chy2z/article/details/80080287
版权

ExtJs 怎么GridPanel有两层工具栏 - chy2z - 黑暗行动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../Client/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../Client/Ext/ext-all.js"></script>
</head>
<body>
<script language=javascript>
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

var sm = new xg.CheckboxSelectionModel();
var tb3 = new Ext.Toolbar({
    items: [
        '->',
        {
            text: 'Button'
        },'-',
        {
            xtype: 'splitbutton',
            text: 'Split Button'
        },    
        {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
        },      
        '-'
    ]
});

var tb4=new Ext.Toolbar({
      
       items:[
      
        "->","-"
  ,{
   text:"添加",
   tooltip:"添加新信息",
   iconCls:"addicon"
  },"","-",{
   text:"编辑",
   tooltip:"编辑信息",
   iconCls:"editicon"
  },"","-",{
   text:"删除",
   tooltip:"删除信息",
   iconCls:"deleteicon"
  },"","-",{
      text:"查看",
   tooltip:"查看信息",
   iconCls:"lookicon"
  },"","-"
  
       ]

});


var grid3 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                sm,
                {id:'company',header: "Company", width: 200, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", dataIndex: 'change'},
                {header: "% Change", dataIndex: 'pctChange'},
                {header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        sm: sm,
        columnLines: true,
        width:600,
        height:300,
        frame:true,
        title:'测试',
        iconCls:'icon-grid',
        renderTo: document.body,
        items:[tb3,tb4]
});

});
</script>
</body>
</html>

黑暗行动
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs笔记1-GridPanel的复选框和工具栏事件自定制
Rainy_Ln的专栏
05-03 1848
大家都知道，ExtJs的快捷与方便在企业应用的项目中还是优势巨大的，可是灵活性总是差强人意。           这边笔记主要记录下GridPanel复选框和分页底部工具栏的一些灵活方法，应该算是曲线救国的方法，目前只用到这样的，希望以后能找到更好的办法。           情况是这样的，需求一个GridPanel，自带复选框列，带分页工具。按照模板写好后发现以下问题：
ExtJs-03-带顶部，底部，脚部工具栏的panel
机会是留给有准备的人的
01-08 1730
//4 带顶部，底部，脚部工具栏的panel HTML： JS：             //4 带顶部，底部，脚部工具栏的panel             var barPanel = Ext.create('Ext.Panel', {                 id: 'barPanel',                 title: '带工具栏的Panel'
Extjs.GridPanel 显示多行工具栏 (tbar)
懒懒的猫。。。
06-23 712
js文件。。 [code="java"] Ext.onReady(function() { //初始化数据 var proData = { records : [{ proName : "cocobra 居家内衣系列" }, { proName : "cocobra 休闲内衣系列" }] }...
22.Extjs Panel中显示多行工具栏(tbar)
weixin_33935505的博客
09-21 224
转自：http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加...
Ext两层以上的tbar
苍茫云海间
08-03 194
首先你的grid已经设置了一个tbar，然后可以在初始化完毕的时候再添加一个tbar listeners : { render : function(trid, rowIndex,e) { var tbar = new Ext.Toolbar({ items : [{text : 'bbar Left'}, '-', {text : 'bbar Right'}] }); ...
GridPanel动态添加ToolBar
zhangsiqi1985的博客
11-24 324
border布局的Panel中的center放了一个GridPanel，我想在GridPanel中放两个toolbar,其中一个是默认的，一个是扩展的，扩展的默认为隐藏，点击默认toolbar上的一个按钮时显示扩展toolbar， 下面是代码： 两个toolbar，一个隐藏:[code="javascript"] tbar : toolBar, listeners : { ...
extjs两行tbar的问题
qq_29663071的博客
04-01 3204
知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题，感兴趣的朋友可以参考下 版本：extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面，一般都是啥样子的
Extjs gridpanel 出现横向滚动条问题的解决方法
10-28
在使用ExtJS开发Web应用程序时，经常会遇到在GridPanel中数据列过多，导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽，因此浏览器会自动显示横向滚动条以便用户查看全部数据...
Extjs学习笔记之四 工具栏和菜单
10-29
本文介绍在桌面程序开发中很常用也很简单的工具栏和菜单，但是在通常的web开发中，要实现好工具栏和菜单并非易事，然而extjs使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。
ExtJS 工具栏 分页事件参数
10-29
ExtJS 工具栏分页事件参数使用说明 ExtJS 是一个流行的 JavaScript 框架，用于构建丰富的互联网应用程序。其中，工具栏分页事件参数是一个非常重要的概念，本文将对其进行详细的介绍。 工具栏分页事件参数简介 在...
ExtJS GridPanel 根据条件改变字体颜色
10-29
ExtJS下GridPanel 根据条件改变字体颜色的实现代码。
ExtJs GridPanel简单的增删改实现代码
10-28
ExtJs GridPanel中实现增删改效果的代码，需要的朋友可以参考下。
extjs中滚动条属性_ExtJS 4之 控制显示隐藏滚动条、隐藏横向滚动条
weixin_35884854的博客
02-06 1154
ExtJS 都是通过配置完成功能，滚动条也不例外，ExtJS默认是隐藏滚动条，我们来看看怎么显示出来，还是引用之前的例子：Ext.create('Ext.panel.Panel',{title:'控制面板',id:'newpanel',width:400,autoScroll：true,height:400,html:'Hi',renderTo:Ext.getBody()});从上面代码，高亮部分...
extjs grid 增加多个toolbar工具栏
记录点滴.......
12-21 468
在创建grid时候这个是必须的： [code="java"] tbar : [{ id : 'newWindow', text : '票据入库', iconCls : 'add', handler : function() { showMemerAddWindow(); //显示表单所在窗体 } }] [/code] 创建完成后可再新建...
Extjs grid工具栏中搜索的实现
zyjustin9的专栏
11-26 837
Extjs grid工具栏中搜索的实现   1.单选框+文本框： { id:"byXmmc", xtype:"radio", boxLabel:"按项目名称&amp;nbsp;", name:"ftype", //注意两个radio的name是一样的，才是一组的 listeners:{ "check":function(){ Ext.getCmp(&quot
Extjs实现多个Grid使用同一个Store，但显示不同的内容
常绍新的专栏
10-17 7920
在Extjs开发应用的过程中，遇到这样的要求：存在一个数据库表的内容（比较有字段A1,A2,A3,A4,B1,B2,B3,B4,C1,C2,C3,C4,D1,D2,D3,D4），在前端显示时，要在grid1中显示部分内容的数据(如A1,A2,A3,B1,B2,B3)，在Grid2中显示另一部分内容的数据（C1,C2,C3,D1,D2,D3），在第三个Grid3中显示全部的数据的另外一些字段(如A1
ExtJS4学习--多表头Grid
热门推荐
wangwuyilove的专栏
06-11 1万+
转载来源：http://www.mhzg.net/a/20115/201151911240247.html
Extjs Design 可视化开发工具
chy2z的专栏
04-25 2146
Extjs 出可视化开发工具啦!   不清楚Ext可视化的可以看一下http://www.screencast.com/users/JackSlocum这里的三个视频哈。 安装和汉化的步骤 第一步下载：Ext需要支持AIR的支持 下载并安装 http://airdownload.adobe.com/air/win/download/latest/AdobeAIRInstaller.
写一个extjs gridpanel 单元格合并
最新发布
05-31
可以使用 Ext.grid.feature.Grouping 插件来进行单元格合并。以下是示例代码： ``` Ext.create('Ext.grid.Panel', { title: 'My Grid Panel', store: myStore, columns: [ { text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Age', dataIndex: 'age', flex: 1 }, { text: 'Salary', dataIndex: 'salary', flex: 1 } ], features: [{ ftype: 'grouping', groupHeaderTpl: '{columnName}: {name} ({rows.length})', hideGroupedHeader: true, startCollapsed: true, groupByText: 'Group by this field' }], renderTo: Ext.getBody() }); ``` 在上述代码中，我们创建了一个包含三列的 GridPanel，并使用 Ext.grid.feature.Grouping 插件进行了单元格合并。我们使用 groupHeaderTpl 属性来指定分组的标题，hideGroupedHeader 属性来隐藏已分组的列的标题，startCollapsed 属性来指定分组初始时是否折叠，groupByText 属性来指定分组菜单项的文本。 如果您想要根据特定的列进行分组和合并，则可以使用 groupField 属性来指定要分组的列的名称。例如： ``` Ext.create('Ext.grid.Panel', { title: 'My Grid Panel', store: myStore, columns: [ { text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Age', dataIndex: 'age', flex: 1 }, { text: 'Salary', dataIndex: 'salary', flex: 1 } ], features: [{ ftype: 'grouping', groupHeaderTpl: '{columnName}: {name} ({rows.length})', hideGroupedHeader: true, startCollapsed: true, groupByText: 'Group by this field', groupField: 'age' }], renderTo: Ext.getBody() }); ``` 在上述代码中，我们将 groupField 属性设置为 'age'，这意味着我们将根据 'age' 列进行分组和合并。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值