2021-04-28

2021/04/27:

1 Ext.grid.Panel类

1创建你的数据模型

var store = Ext.create('Ext.data.Store', {

        id: 'simpsonsStore',

        autoLoad: false,

        fields: ['name', 'email', 'phone'],   

        pageSize: itemsPerPage, // items per page

        proxy: {

            type: 'ajax',

            // url that will load data with respect to start and limit params

            url: '/myuser',

            reader: {

                type: 'json',

                rootProperty: 'data',

                totalProperty: 'total'

            }

        }

    });

2、Ext.selection.Model类（创造复选框）

列出数据绑定的组件中已经选择的记录，这是一个抽象类不能具体使用，需要结合Ext.grid.Panel

和Ext.tree.Panel一起使用，子类是CheckboxModel, 实例化 var sm = new Ext.selection.CheckboxModel();

Ext.create('Ext.grid.Panel',{selModel:sm},这样我们的表格可以带上复选框了

3、Ext.button.Button类

按钮组件类，用来创建按钮，并且可以绑定

Ext.create('Ext.Button', {

    text: 'Click me',

    renderTo: Ext.getBody(),

    handler: function() {

        alert('You clicked the button!');

    }

});

如果需要给按钮添加图标，需要配置iconCls,两种方式，一种自定义，一种结合fontawesome

iconCls:'my-home-icon'

.my-home-icon{background-image:url(../images/my-home-icon.gif)!important;}

或者

iconCls:'x-fa fa-home'

4、Ext.grid.Panel与Ext.Button.Button类结合实现表格的删除操作

Ext.create('Ext.grid.Panel', {

tbar:[

{ xtype: 'button', text: '删除', iconCls: "fa fa-minus-square",function(){

 // 回调函数会传给我们当前按钮的Button类实例化对象，我们可以用方法findParentByType

                    // var grid = o.findParentByType('gridpanel')

                    var grid = o.ownerCt.ownerCt

                    var data = grid.getSelectionModel().getSelection()

                    if (data.length === 0) {

                        Ext.Msg.alert("提示", "您最少要选择一条数据")

                    } else {

                        var ids = []

                        Ext.Array.each(data, function (record) {

                            ids.push(record.get('id'))

                        })

                        Ext.Ajax.request({

                            url: '/deluser',

                            method : 'post',

                            dataType:'json',

                            headers: {'Content-Type':'application/json'},

                            jsonData:{ids},

                            success: function (response, opt) {

                                console.log(response,111)

                                if(response.status===200){

                                    Ext.Array.each(data,function(record){

                                        store.remove(record)

                                    })

                                }

                            }

                        })

                    }

} }

]

})

5、Ext.grid.column.Action 类