自己封装的Extjs组件GroupGrid的代码(2) GroupGrid.js

本文介绍如何使用 Extjs 组件 GroupGrid 进行图表配置。通过创建不同的 RadioGroup 来选择图表类型、分类及统计数据,实现了图表的动态生成。此外,还详细展示了创建表单面板的过程以及按钮事件的绑定。

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

接着上《一篇自己封装的Extjs组件GroupGrid的代码(1)  GroupGrid.js》


剩余GroupGrid.js代码:

createChartWindow:function(){
                  var date=new Date().format("Y-m-d H:i:s");                             
                 
                  this.typeCheckboxGroup=new Ext.form.RadioGroup({                                                       
                                                        allowBlank:false,                                                          
                                                        hideLabel:true,
                                                        height:20,
                                                        columns: 3,
                                                        items: [
                                                            {boxLabel: '饼型图', name:date+ 'cb-col'},
                                                            {boxLabel: '柱状图', name:date+ 'cb-col'},
                                                            {boxLabel: '折线图', name:date+ 'cb-col'}
                                                        ],
                                                        listeners:{
                                                             scope:this,
                                                             "change":function(rg,rd){                                                                
                                                                  this.chartType=rd.boxLabel;
                                                             }
                                                        }
                                               });
                  
                   var kindItems=[];  
                   var statisItems=[];                           
                   
                   Ext.each(this.storeField,function(){
                           if(this.type=="string"||this.type=="date")
                                    kindItems[kindItems.length]={boxLabel:this.header,name:date+'kindItems',chartKind:this.name}                  
                           else     statisItems[statisItems.length]={boxLabel:this.header,name:date+"statisItems",chartStatis:this.name}  
                   });
                  
                   this.kindRadioGroup=new Ext.form.RadioGroup({
                                                        allowBlank:false,                                                       
                                                        hideLabel:true,
                                                        columns: 4,
                                                        items:kindItems,
                                                        listeners:{
                                                             scope:this,
                                                             "change":function(rg,rd){                                                                
                                                                 this.chartKind=rd.chartKind;
                                                                 this.chartKindName=rd.boxLabel;
                                                             }
                                                        }
                                               }); 
                  
                   this.statisRadioGroup=new  Ext.form.RadioGroup({
                                                        allowBlank:false,                                                           
                                                        hideLabel:true,
                                                        columns: 4,
                                                        items:statisItems,
                                                        listeners:{
                                                             scope:this,
                                                             "change":function(rg,rd){                                                                
                                                                 this.chartStatis=rd.chartStatis;
                                                                 this.chartStatisName=rd.boxLabel;
                                                             }
                                                        }
                                               }); 
                                             
                  
                   var chartFromPanelButtons=[new Ext.Button({text:"确 定"}),
                                              new Ext.Button({text:"重 置"}),
                                              new Ext.Button({text:"取 消"})]
                                                                      
                   this.chartFromPanel=new Ext.form.FormPanel({                                                                      
                                                           frame:true,
                                                           buttonAlign:"center",
                                                           items:[                                                                            
                                                                  {     xtype: 'fieldset',
                                                                        title: '图表类型',
                                                                        autoHeight: true,
                                                                        layout: 'form',
                                                                        items:[this.typeCheckboxGroup]
                                                                  },{     xtype: 'fieldset',
                                                                        title: '分类',
                                                                        autoHeight: true,
                                                                        layout: 'form',
                                                                        items:[this.kindRadioGroup]
                                                                  },{   xtype: 'fieldset',
                                                                        title: '统计数据',
                                                                        autoHeight: true,
                                                                        layout: 'form',
                                                                        items:[this.statisRadioGroup]
                                                                  },{
                                                                        xtype: 'fieldset',
                                                                        title: '注意事项',
                                                                        autoHeight: true,
                                                                        layout: 'form',
                                                                        items:[new Ext.form.Label({                                                                                
                                                                                 text:"统计图根据查询到的数据生成。如果没有查询数据,根据全部数据生成统计图。"
                                                                        })]
                                                                  }       
                                                           ],
                                                           buttons:chartFromPanelButtons
                                                });
                   
                    chartFromPanelButtons[0].on("click",function(but){
                                    if(this.chartFromPanel.getForm().isValid()){
                                           new Ext.tet.ChartWindow({                                                       
                                                         chartUrl:this.chartUrl,
                                                         DataSourceParams:{tableName:this.store.baseParams["tableName"],where:this.store.baseParams["where"],chartType:this.chartType,chartKind:this.chartKind,chartStatis:this.chartStatis,chartKindName:this.chartKindName,chartStatisName:this.chartStatisName}
                                           }).show();
                                    }
                                    else  Ext.Msg.alert('提示','每个分类必须选择一个');  
                     },this);                                   
                                               
                    chartFromPanelButtons[1].on("click",function(but){
                                                   this.chartFromPanel.getForm().reset();
                    },this); 
                   
                    chartFromPanelButtons[2].on("click",function(but){
                                                   this.chartWindow.hide();
                    },this);
                   
                    this.chartWindow = new Ext.Window({
                                                        title:"图形分析",
                                                     width:450,
                                         resizable:false,
                                                        closeAction : 'hide',
                                                        closable:true,
                                                        plain : true,
                                               modal: 'true',
                                               border:false,
                                               iconCls:"charticon",
                                                        items: [this.chartFromPanel]
                                           });
                   
             },
             createQueryMenu:function(){                   
                    if(!this.tbar) this.tbar=[];
                    this.tbar.push({text:"刷新",tooltip:"刷新页面",iconCls:"refreshicon",ref:"../refBut",handler:function(){window.location.reload();}});                     
                    var items=[];
                    var hightQueryFormPanelItem=[];                 //保存高级查询控件
                    var searchColumns=this.getSearchColumns();      //得到查询列                 
                    if(searchColumns.length==0){
                          this.tbar.unshift([new Ext.Toolbar.Fill()]);
                          return ;               
                    }
                    Ext.each(searchColumns,function(item,index){    //动态生成高级查询和一般查询                 
                           if(index==0){
                                items[index]={text:this.header,name:this.dataIndex,checked:true};
                           }
                           else items[index]={text:this.header,name:this.dataIndex};
                           if(!this.attribute||!this.attribute.type||this.attribute.type=="string")
                                        if(this.attribute&&this.attribute.xtype=="combobox")
                                        hightQueryFormPanelItem.push(new Ext.tet.ComboBox(Ext.apply({
                                                   type:"string",
                                                   name:this.dataIndex,
                                                   fieldLabel:this.header,
                                                   anchor:"96%",
                                                   emptyText:"请选择查询内容"
                                        },this.attribute.options)));
                                        else
                                        hightQueryFormPanelItem.push(new Ext.form.TextField({
                                                   type:"string",
                                                   name:this.dataIndex,
                                                   fieldLabel:this.header,
                                                   anchor:"96%",
                                                   emptyText:"请输入查询内容"
                                        }));
                           else if(this.attribute.type=="date")
                                        hightQueryFormPanelItem.push( new Ext.tet.DateField({
                                                   type:"date",
                                                   name:this.dataIndex,
                                                   beginTimeConfig:{fieldLabel:this.header}
                                        }));
                           else if(this.attribute.type=="int")
                                        hightQueryFormPanelItem.push(new Ext.tet.NumberField({
                                                   type:"int",
                                                   name:this.dataIndex,
                                                   numberConfig:{allowDecimals:false,emptyText:"请输入整数"},
                                                   beginNumberConfig:{fieldLabel:this.header}
                                        }));
                           else if(this.attribute.type=="float")
                                        hightQueryFormPanelItem.push(new Ext.tet.NumberField({
                                                   type:"float",
                                                   name:this.dataIndex,
                                                   numberConfig:{decimalPrecision:this.attribute.decimalPrecision||2},
                                                   beginNumberConfig:{fieldLabel:this.header}
                                        }));
                    }); 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值