【问题标题】:How to change column headers extjs如何更改列标题extjs
【发布时间】:2015-09-09 08:53:07
【问题描述】:

我正在尝试在渲染网格后更改 Ext.grid.Panel 的列标题。 我/正在尝试通过下一个更改列

this.headerCt.getHeaderAtIndex(j).setText(column_.text);

点击栏目菜单->栏目后,不显示新的标题值, 但列本身有新的标题。 我该如何解决这个问题

【问题讨论】:

  • 您正在使用哪个版本的 Ext?因为在 Ext js 5 中它正在更新
  • 我正在开发 Extjs 5.1

标签: javascript extjs extjs5


【解决方案1】:
 change column headers index in extjs

     Ext.onReady(function () {
                var userStore = Ext.create('Ext.data.Store', {
                    autoLoad: 'false',
                    fields: [
                        {name:'name'},
                        {name:'email'},
                        {name:'phone'}
                    ],
                    data: [
                        {name:'Anil',email:'AnilThakurr54@gmail.com',phone:'989681806'},
                        {name:'Sunil',email:'SunilkumarGmail.com',phone:'8053173589'},
                        {name:'Sushil',email:'Sushil@gmail.com',phone:'9896133066'},
                        {name:'Puneet',email:'PuneetChawla@gmail.com',phone:'9729810025'},
                        {name:'Rahul',email:'RahulSain@gmail.com',phone:'9050438741'},
                        {name:'Anil2',email:'Ak3217106@gmail.com',phone:'9729935023'},
                    ]
                });
                Ext.create('Ext.window.Window', {
                    height: 250,
                    width: 400,
                    xtype: 'panel',
                    layout: 'fit',
                    title: 'Change Header Of Extjs Grid Column on Button Click',
                    items:
                    [
                        {
                            layout: 'border',
                            height: 350,
                            renderTo: Ext.getBody(),
                            items:
                               [
                                   {
                                       xtype: 'panel',
                                       region: 'north',
                                       layout:'fit',
                                       items: [
                                               {
                                                   xtype:'grid',
                                                   id: 'GridId',
                                                   store: userStore,
                                                   tbar: [{
                                                       text: 'Change',
                                                       iconCls: 'employee-add',
                                                       handler: function () {
                                                           var grid = Ext.getCmp('GridId');
                                                           grid.headerCt.getHeaderAtIndex(0).setText('test');
                                                           grid.headerCt.getHeaderAtIndex(1).setText('MobileNo');

                                                       },
                                                   },
                                                   {
                                                       text: 'by Default',
                                                       iconCls: 'employee-add',
                                                       handler: function () {
                                                           var grid = Ext.getCmp('GridId');
                                                           grid.headerCt.getHeaderAtIndex(0).setText('Name');
                                                           grid.headerCt.getHeaderAtIndex(1).setText('Email Address');
                                                       }
                                                   }],
                                                   columns: [
                                                       {
                                                           header: 'Name',
                                                           width: 100,
                                                           sortable:true,
                                                           dataIndex: 'name'
                                                       },
                                                       {
                                                           header: 'Email Address',
                                                           width: 150,
                                                           dataIndex:'email',
                                                       },
                                                       {
                                                           header:'Phone Number',
                                                           flex: 1,
                                                           dataIndex:'phone'
                                                       }
                                                   ]
                                               }],
                                       dockedItems: [
                                              {
                                                  xtype:'pagingtoolbar',
                                                  itemId:'pagingLog',
                                                  store:userStore,
                                                  dock:'bottom',
                                                  displayInfo: true,
                                              }]
                                   }]
                        }]

                }).show();
            });

【讨论】:

  • 嗨,Vahe Akhsakhalyan
猜你喜欢
  • 2021-04-25
  • 2021-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多