我的extjs学习之路2—信息展示和信息筛选的实现

最新推荐文章于 2019-08-09 17:51:07 发布

Waiting

最新推荐文章于 2019-08-09 17:51:07 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs

本文链接：https://blog.youkuaiyun.com/liunian02050328/article/details/38816081

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用ExtJS框架进行数据查询与展示的方法。重点讲解了如何构建包含表单面板和网格面板的面板，实现数据的检索及显示，并通过Ajax与后端交互获取数据。

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

用了一个周的时间熟悉了几个比较常用到的组件，根据API提供的示例也写出了几个比较粗陋的UI，下面的时间就投入到了ExtJs的具体应用上来。

数据的查询部分

数据的查询无非是将查询出来的数据传到前台显示。稍微复杂一点就是通过部分的查询条件来将数据查出来，然后通过前台展示。那么如何实现ExtJs和后台之间的交互呢？

首先看下面的这一幅图：

可以看到上图，这个一个大的Panel，Panel中包含两部分，上面的信息检索部分是一个formpanel，下面的信息显示部分是一个gridpanel，首先要加载的是全部的数据，然后可以通过部分条件的筛选来加载所检索的数据。这属于两个方面的内容。

首先看布局的实现：

定义上面的form：createForm，定义下面的grid：createGrid，然后分别将定义好的createForm和createGrid装入到大的Panel中来。代码表示如下：

Ext.define('com.xx.xx.xxx.customerInfo', {
         extend: 'Ext.panel.Panel',
         initComponent: function() {
                   varme = this;
                   varform = me.createForm();
                   vargrid = me.createGrid();
                   me.items= [ form, grid ];
                   me.callParent(arguments);
        }

}

gridPanel部分:首先放入的是全部的数据信息，后来是通过信息检索得到的数据信息
createGrid : function() {
                   varme = this;
                   vargrid = Ext.create('Ext.grid.Panel', {
                            width: '100%',          
                            border: false,
                            forceFit: true,
                            selModel: Ext.create('Ext.selection.CheckboxModel'),// 创建一个复选框      
                           store:me.createCustomerStore(),
                            tbar:[{
                                    xtype:'button',
                                     text:'修改客户信息',
                                     handler:function(){   
                                               varmodels = grid.getSelectionModel().getSelection();
                                               if(models.length==0){
                                                        Ext.Msg.alert('提示 :','请选择一条数据');
                                                        return;
                                               }
                                               if(models.length>1){
                                                       Ext.Msg.alert('提示 :','请选择一条数据');
                                                        return;
                                               }                 

                                              varwin = Ext.create('com.xxxx.xxxxx.usermessage.updateCustomerWin',{

                                                        myGrid:me

                                              });

                                              win.getComponent(0).getForm().loadRecord(models[0]);

                                               win.show();

                                               }                                             

                                     },{
                                               xtype:'button',
                                               text:'刷新',
                                               handler:function(){
                                                        me.store.load();
                                               }
                                     }],

                            columns: [ {
                                     text: 'id',
                                     dataIndex: 'id',
                                     hidden: true

                            },{
                                     text: '客户名称',
                                     dataIndex: 'customername'

                            },{
                                     text: '所属公司',
                                     dataIndex: 'company'

                            },{
                                    text: '客户类型',
                                     dataIndex: 'customertype',
                                     renderer:function(value){
                                               if(value){
                                                        return'VIP客户'; 

                                               }else{
                                                        return'普通客户';                                                 

                                               }
                                     }

                            },{
                                     text: '联系人',
                                     dataIndex: 'contact'
                            }]        

                   });

                   returngrid;

         }

Formpanel部分

//客户类型下拉框的定义

typeStore =Ext.create('Ext.data.ArrayStore', {

         fields: [ 'abbr','value' ],

         data: [ [ '普通用户',0 ],['VIP用户',1 ]  ]

});

//建立frompanel部分

createForm : function() {
                   varme = this;
                   varformPanel = Ext.create('Ext.form.Panel', {                         

                            frame: true, 
                            width: '100%',
                            bodyPadding: 5,
                            collapsible:true, 
                            fieldDefaults: {
                                     border: false,
                                     labelAlign: 'right',
                                     labelWidth: 90,
                                     msgTarget: 'qtip'
                            },

                            items: [ {
                                     layout: 'form',
                                     frame: 'true',
                                     border: false,
                                     buttonAlign:'center',
                                     buttons:[{         

                                               text: '查询',
                                               width: 100,
                                               align:'center',
                                               handler: function(button) {                                           

                                                        varcname = me.query('textfield[name=cname]')[0].getValue();
                                                        varctype = me.query('combobox[name=ctype]')[0].getValue();
                                                        varstore = Ext.create('Ext.data.Store', {

                                                                 fields: [ 'customername','company', 'customertype','contact' ],

                                                                 proxy: {

                                                                           type: 'ajax',
                                                                           url: './customer/getcustomerInfo.do',
                                                                           extraParams: {
                                                                           'cname': cname, //将姓名传到后台
                                                                           'ctype': ctype  //将得到的类型所对应的值传到后台

                                                                 },

                                     reader: {
                                               type: 'json',
                                               root: 'sresult'  //通过检索得到的数据集，通过Ajax传到前台
                                   }

                            }

                   });

                   store.load({

                       scope : me,

                       callback: function(records,operation,success){

                                vargrid = me.query('grid')[0];

                                     varoldStore = grid.getStore();

                                     oldStore.removeAll();

                                     oldStore.add(records);

                                     grid.getView().refresh();

                       }

                   });

         }

}],

                                     defaults: {

                                               anchor: '100%'

                                     },

                                     items: [ {

                                               xtype: 'container',

                                               border: false,

                                               layout: 'hbox',                                      

                                               items: [ {

                                                        xtype: 'textfield',

                                                        border: false,

                                                        align:'center',

                                                        name: 'cname',

                                                        fieldLabel: '客户名称',                                                  

                                                        labelWidth: 300,

                                                        width: 600

                                                        },{

                                                        xtype: 'combobox',

                                                        name: 'ctype',

                                                        border: false,  

                                                        align:'center',                                       

                                                        fieldLabel: '客户类型',

                                                        labelWidth: 200,

                                                        width: 400,

                                                        store: typeStore,                                                   

                                                        displayField: 'abbr'

                                               }]

                                     } ]

                            }]

                   });

                   returnformPanel;

         }