extJs使用

1.图片展示
            {text: '单元封面', dataIndex: 'cover', align: 'center', tdCls: 'tdMiddle', width: 150,
                renderer : function (value) {
                    if (value != null && value!=''){
                        return "<img src='" + downloadUrl + value + "' height='35' width='35' />";
                    } else {
                        return '未设置';
                    }
                }
            },

2.时间格式化
            {text: '创建时间', dataIndex: 'createTime', align: 'center', tdCls: 'tdMiddle', width: 150,
                renderer : function (value) {
                    if (value == null) {
                        return '--';
                    } else {
                        return Ext.util.Format.date(new Date(parseInt(value.time)),"Y-m-d H:i:s");
                    }
                }
            }

3.列表可编辑
            {text: '学习步骤名称', dataIndex: 'studyStepsName', align: 'center', tdCls: 'tdMiddle', width: 150,
                editor: new Ext.form.TextField({
                    xtype: 'textfield',
                })
            },
            listeners: {
            'edit': function (editor, e) {
                Ext.Ajax.request({
                    url: studyCenterCourse.updateMaterialName,
                    params:{
                        id:e.record.data.id,
                        sortNum:e.record.data.sortNum,
                        name:e.record.data.name,
                        jumpUrl:e.record.data.jumpUrl,
                        materialRelationType:e.record.data.materialRelationType,
                        studyStepsName:e.record.data.studyStepsName
                    },
                    method: 'POST',
                    type: 'json',
                    success: function (response, options) {
                        var data = response.responseText;
                        var json = eval("(" + data + ")");
                        Ext.Msg.alert('提示', json.text);
                        studyCenterCourse.materialStore.load();
                        studyCenterCourse.lessonStore.load();
                    },
                    failure: function (response, options) {
                        var data = response.responseText;
                        var json = eval("(" + data + ")");
                        Ext.Msg.alert('提示', json.text);
                    }
                });
            }
        },

4.store重新加载
        var new_params = {materialRelationType: studyCenterCourse.materailTypeCombobox.getValue()};
        Ext.apply(studyCenterCourse.allMaterialStore.proxy.extraParams, new_params);
        studyCenterCourse.allMaterialStore.loadPage(1);

5.引用其他grid
            },{
                xtype: 'textfield',
                name: 'studyCenterMaterialForm.studyCenterLessonMaterialVo.jumpUrl',
                fieldLabel: '跳转链接',
                allowBlank: true,
                afterLabelTextTpl: studyCenterCourse.required,
                margin: '10px 15px 0px 0px',
                width: 180,
                hidden: true
            }, {
                layout: 'column',
                margin: '20px 10px 0px 10px',
                border: false,
                name: 'studyCenterLesson.material',
                items: [
                    studyCenterCourse.allMaterialGrid
                ]
            }],

6.获得grid或者form表单中的数据
        }, {
            text: '保存',
            name: 'saveUser',
            handler: function () {
                if (this.up('form').getForm().isValid()) {
                    if (studyCenterCourse.lessonGrid.getSelectionModel().getSelection().length > 0) {
                        var lessonId = studyCenterCourse.lessonGrid.getSelectionModel().getSelection()[0].data.id;
                        var url = "";
                        var materialRelationType = studyCenterCourse.allMaterialForm.query("[name='studyCenterMaterialForm.studyCenterLessonMaterialVo.materialRelationType']")[0];

                        if (studyCenterCourse.allMaterialGrid.getSelectionModel().getSelection().length > 0 && materialRelationType.value!=9) {
                            var materialRelationIds = "";
                            for (var i = 0; i < studyCenterCourse.allMaterialGrid.getSelectionModel().getSelection().length; i++) {
                                materialRelationIds += studyCenterCourse.allMaterialGrid.getSelectionModel().getSelection()[i].data.id + ",";
                            }
                            if (materialRelationIds.length > 0) materialRelationIds = materialRelationIds.substring(0, materialRelationIds.length - 1);
                            url = studyCenterCourse.addMaterialToLesson + "&lessonId=" + lessonId + "&materialRelationIds=" + materialRelationIds;
                        } else if (materialRelationType.value==9) {

                            url = studyCenterCourse.addMaterialToLesson + "&lessonId=" + lessonId ;
                        } else {
                            Ext.Msg.alert('提示', '请选择要选入的素材.');
                        }
                        Ext.Msg.wait('保存中，请稍等...', '', '');
                        this.up('form').getForm().submit({
                            url: url,
                            method: 'POST',
                            async: false,
                            success: function (form, action) {
                                var data = action.response.responseText;
                                var json = eval("(" + data + ")");
                                Ext.Msg.alert('提示', json.text);
                                studyCenterCourse.materialStore.reload();
                                studyCenterCourse.lessonStore.reload();
                                studyCenterCourse.allMaterialWin.hide();
                            },
                            failure: function (form, action) {
                                var data = action.response.responseText;
                                var json = eval("(" + data + ")");
                                Ext.Msg.alert('提示', json.text);
                            }

                        });
                    } else {
                        Ext.Msg.alert('提示', '请选择要选入的素材.');
                    }
                }
            }
        }]
    });

7.多选框，以及动态设置表单内容显示与隐藏
    studyCenterCourse.materailTypeStore = new Ext.data.ArrayStore({
        fields: ['id', 'name'],
        data: [[1, '直播'], [2, '音频'], [3, '伴读'], [4, '题库'], [5, '视频'], [6, 'AI小班'], [7, 'AI跟读'], [8,'热身环节游戏'],[9,'跳转链接']]
    });

    studyCenterCourse.materailTypeCombobox = new Ext.form.ComboBox({
        fieldLabel: '素材类型',
        margin: '10px 15px 0px 0px',
        xtype: "combobox",//panel
        layout: "column",
        name: 'studyCenterMaterialForm.studyCenterLessonMaterialVo.materialRelationType',
        store: studyCenterCourse.materailTypeStore,
        valueField: 'id',
        displayField: 'name',
        editable: false,
        allowBlank: false,
        isFormField: true,
        value : 1,
        width: 180,
        afterLabelTextTpl: studyCenterCourse.required,
        listeners: {
            'select': function (combox) {
                var new_params = {materialRelationType: combox.getValue()};
                var jumpUrl = studyCenterCourse.allMaterialForm.query("[name='studyCenterMaterialForm.studyCenterLessonMaterialVo.jumpUrl']")[0];
                var bookPackageType = studyCenterCourse.allMaterialForm.query("[name='showNameFlag']")[0];
                var material = studyCenterCourse.allMaterialForm.query("[name='studyCenterLesson.material']")[0];

                if (new_params.materialRelationType == 9){
                    bookPackageType.hide();
                    material.allowBlank = true
                    material.hide();
                    jumpUrl.allowBlank = false;
                    jumpUrl.show();
                } else {
                    bookPackageType.show();
                    material.show();
                    jumpUrl.allowBlank = true;
                    jumpUrl.hide();
                }
                Ext.apply(studyCenterCourse.allMaterialStore.proxy.extraParams, new_params);
                studyCenterCourse.allMaterialStore.loadPage(1);
            }
        }
    });

8.列表附带查询操作
    /*  store */
    teacher.teacherUserBindStore = new Ext.data.Store({
        fields: [{name : "guid", mapping: 0},
            {name : "name", mapping: 0},
            {name : "phoneNum", mapping: 0}
        ],
        pageSize: 20,  //页容量5条数据
        //是否在服务端排序 （true的话，在客户端就不能排序）
        remoteSort: true,
        remoteFilter: true,
        proxy: {
            type: 'ajax',
            url: teacher.userFrontSearch,
            reader: {
                type: 'json', //返回数据类型为json格式
                root: 'rows',  //数据
                totalProperty: 'total' //数据总条数
            }
        },
        autoLoad: true  //即时加载数据
    });

    teacher.teacherUserBindGrid = new Ext.grid.Panel({
        store: teacher.teacherUserBindStore,
        autoScroll : 'auto',
        region : 'center',
        tbar: [
            {
                xtype: 'textfield',
                name: 'userId',
				id:'userId',
                margin: '5px',
                emptyText: '用户ID'
            },
            {
                xtype: 'textfield',
                margin: '5px',
                name: 'tel',
				id:'tel',
                emptyText: '手机号'
            },
            {
                text:'查询',handler:function(){
                    //点击搜索按钮将查询条件传递到后台
                    var userId=Ext.getCmp('userId').getValue();
                    var tel=Ext.getCmp('tel').getValue();
                    teacher.teacherUserBindStore.load({params:{start:0,limit:20,foo:'bar',userId:userId,tel:tel}});
                }
            }
        ],
        columns: [
            {text: '操作', dataIndex: '', align: 'center', tdCls:'tdValign',width: 100,
                renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {
                    return `<a href='javascript:void(0)' onclick='teacher.updateTeacher(${rowIndex})'>选择</a>`;
                }
            },
            {text: '用户ID', dataIndex: 'guid', align: 'center',tdCls:'tdValign', width: 280,
                renderer: function (value) {
                    return value.guid;
                }
            },
            {text: '用户昵称', dataIndex: 'name', align: 'center',tdCls:'tdValign', width: 180,
                renderer: function (value) {
                    return value.name;
                }
            },
            {text: '手机号', dataIndex: 'phoneNum', align: 'center',tdCls:'tdValign', width: 180,
                renderer: function (value) {
                    return value.phoneNum;
                }
            }
        ],
        bbar: [{

            xtype: 'pagingtoolbar',
            store: teacher.teacherUserBindStore,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据",
            beforePageText: "当前页",
            afterPageText: "共{0}页",
            displayInfo: true
        }]
		});

    teacher.updateTeacher = function (rowIndex) {
    	console.log("rowIndex"+rowIndex);
        if (teacher.teacherUserBindGrid.getSelectionModel().getSelection().length > 0) {
            var data = teacher.teacherUserBindGrid.getStore().getAt(rowIndex).data.guid;
            var selectedData=teacher.teachergrid.getSelectionModel().getSelection()[0].data.id;
            console.log("selectedData  " + selectedData.id);
            console.log("data  " + data.guid);

            Ext.MessageBox.confirm('Confirm', '确定绑定用户：'+data.guid, function (btn) {
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: 'teacher/teacherBindUserUpd?teacherId='+selectedData.id+'&frontUserId='+data.guid,
                        method: 'POST',//请求方式
                        type: 'json',
                        success: function (response, options) {//加载成功的处理函数
                            var data = response.responseText;
                            var json = eval("(" + data + ")");
                            Ext.Msg.alert('提示', json.text);
                            teacher.teacherUserBindStore.reload();
                            teacher.teacherUserBindWin.close();
                            teacher.teacherstore.reload();
                        },
                        failure: function (response, options) {//加载失败的处理函数
                            var data = response.responseText;
                            var json = eval("(" + data + ")");
                            Ext.Msg.alert('提示', json.text);
                        }
                    });
                }
            });

        } else {
            Ext.MessageBox.alert("标题", "请选择课程源数据.");
        }
    };



    teacher.teacherUserBindForm = new Ext.form.Panel({
        name: 'teacherUserBindForm',
        closeAction: 'close',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        border: false,
        autoScroll: true,
        bodyPadding: 10,
        defaults: {
            anchor: '100%'
        },
        fieldDefaults: {
            labelStyle: 'font-weight:bold',
            labelWidth: 110,
            labelAlign: 'right'
        },
        items: [
            teacher.teacherUserBindGrid
        ]
    });

    teacher.teacherUserBindWin = Ext.widget('window', {
        title: '管理用户绑定',
        closeAction: 'close',
        width: 800,
        height: 525,
        minWidth: 450,
        minHeight: 300,
        layout: 'fit',
        resizable: true,
        modal: true,
        items: [teacher.teacherUserBindForm],
        defaultFocus: 'firstName'
    });

    teacher.teacherUserBindAlert = function(id, codeName) {
        teacher.teacherUserBindStore.load();
        teacher.teacherUserBindWin.show();
    };

9.引用其他tbar，查询按钮
    studyCenterCourse.materiaIdSearchField = new Ext.form.TextField({
        maxLength: 50,
        emptyText: 'ID',
        width: 80,
        listeners : {
            specialkey : function(field, e) {
                if (e.getKey() == Ext.EventObject.ENTER) {
                    studyCenterCourse.materialSearchAlert();
                }
            }
        }
    });

    studyCenterCourse.materialNameSearchField = new Ext.form.TextField({
        maxLength: 50,
        emptyText: '素材名称',
        width: 150,
        listeners : {
            specialkey : function(field, e) {
                if (e.getKey() == Ext.EventObject.ENTER) {
                    studyCenterCourse.materialSearchAlert();
                }
            }
        }
    });

    studyCenterCourse.materialSearchAlert = function () {
        var id = studyCenterCourse.materiaIdSearchField.getValue();
        var name = studyCenterCourse.materialNameSearchField.getValue();

        studyCenterCourse.allMaterialStore.pageNum = 1;
        var new_params = {id: id, name: name};
        Ext.apply(studyCenterCourse.allMaterialStore.proxy.extraParams, new_params);
        studyCenterCourse.allMaterialStore.loadPage(1);
    };    

    studyCenterCourse.allMaterialGrid = new Ext.grid.GridPanel({
        store: studyCenterCourse.allMaterialStore,
        height: 440,
        width: 545,
        selModel: { selType: 'checkboxmodel' },//选择框
        viewConfig: {stripeRows: true, enableTextSelection: true},
        columns: [
            {text: 'ID', dataIndex: 'id', align: 'left', tdCls: 'tdMiddle', width: 150},
            {text: '素材名称', dataIndex: 'name', align: 'left', tdCls: 'tdMiddle', width: 300}
        ],
        bbar: [{
            xtype: 'pagingtoolbar',
            store: studyCenterCourse.allMaterialStore,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据",
            beforePageText: "当前页",
            afterPageText: "共{0}页",
            displayInfo: true
        }],
        tbar: {
            xtype: "container",
            border: false,
            items: [{
                xtype: "toolbar",
                items: [
                    studyCenterCourse.materiaIdSearchField,
                    studyCenterCourse.materialNameSearchField,
                    {text: '搜索', handler: studyCenterCourse.materialSearchAlert}
                ]
            }]
        }
    });

10.js方法onclock 传值
return "<a href='javascript:void(0)' onclick=\"studyCenterPackage.choicePrize('" + value + "','" + name + "','" + type +  "')\">选择</a>";

11.获取下拉框的值
获取combox ID值：
var valueField =  Ext.getCmp('ComboBoxId').getValue();
获取显示值：
var displayField =  Ext.getCmp('ComboBoxId').getRawValue();
         例：   var type = Ext.getCmp("type").getValue();
                var detailType = Ext.getCmp("detailType").getValue();
                var form = studyCenterPackage.packageForm.getForm();
                if (type==1 && detailType ==2) {
                    form.findField("studyCenterPackageForm.studyCenterPackageVo.bookBagClassId").show();
                } else {
                    form.findField("studyCenterPackageForm.studyCenterPackageVo.bookBagClassId").hide();
                }

11.单选按钮
{
            fieldLabel: '是否有学习报告',
            xtype: "radiogroup",//panel
            layout: "column",
            isFormField: true,
            width: 180,
            margin: '10px 20px 0px 0px',
            afterLabelTextTpl: studyCenterCourse.required,
            items: [{
                boxLabel: '是',
                name: 'studyCenterLessonForm.studyCenterLessonVo.cacheFlag',
                inputValue: 1,
                xtype: "radio"//单选扭类型
            }, {
                boxLabel: '否',
                name: 'studyCenterLessonForm.studyCenterLessonVo.cacheFlag',
                checked: true,//默认选中
                inputValue: 0,
                xtype: "radio"
            }]
        }

12.选择文件
    {
    layout: 'column',
    margin: '10px 0px 0px 0px',
    border: false,
    items: [{
        border: false,
        columnWidth: 0.8,
        layout: "form",
        items: [{
            border: false,
            columnWidth: 1,
            layout: "form",
            xtype: 'textfield',
            name: 'studyCenterClassPrizeForm.studyCenterClassPrizeVo.squareImage',
            fieldLabel: '奖励图片-正方形',
            readOnly: false
        }]
    }, {
        border: false,
        columnWidth: 0.2,
        margin: '0px 0px 0px 10px',
        width: 70,
        layout: "form",
        align: 'left',
        items: [{
            xtype: 'button',
            text: '选择文件',
            listeners: {
                'click': function () {
                    openUpload("jpg-png-jpeg", "studyCenterClassPrizeForm.studyCenterClassPrizeVo.squareImage", studyCenterPackage.classPrizeForm, "MD5", null, null, 200);
                }
            }
        }]
    }]
} 

13。通过ID获取combox的值
service.finishPrizeStatusStore = new Ext.data.ArrayStore({
    fields: ['id', 'name'],
    data: [[99, '是否有学霸奖'], [-1, '放弃'], [0, '待发起'],[1, '挑战中'], [2, '挑战成功-待领奖'], [3, '挑战成功-已领奖'],[4, '挑战失败'], [5, '挑战成功-已过期']]
});
var status = service.finishPrizeStatusStore.getById(json.finishPrizeStatus).get("name");

14。form表单展示
service.finishPrizeDetailPanel = new Ext.form.Panel({
    name: 'refundDetailPanel',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    border: false,
    autoScroll: true,
    bodyPadding: 10,
    defaults: {
        anchor: '100%'
    },
    fieldDefaults: {
        labelStyle: 'font-weight:bold',
        labelWidth: 70,
        labelAlign: 'right'
    },
    items: [{
        xtype: 'displayfield',
        fieldLabel: '学霸状态',
        name: 'finishPrizeStatus',
        value: '',
    }, {
        xtype: 'displayfield',
        fieldLabel: '发起时间',
        name: 'createDate',
        value: ''
    }, {
        xtype: 'displayfield',
        fieldLabel: '截止时间',
        name: 'finishPrizeEndDate',
        value: ''
    }, {
        xtype: 'displayfield',
        fieldLabel: '学霸奖励',
        name: 'prizeName',
        value: ''
    }, {
        xtype: 'displayfield',
        fieldLabel: '挑战天数',
        name: 'finishPrizeDays',
        value: ''
    }]
});
service.finishPrizeDetail = function (rowIndex) {
    service.finishPrizeDetailPanel.getForm().reset();

    var selectdata = service.grid.getStore().getAt(rowIndex).data;
    var userId = selectdata.service.userId;
    var classId = selectdata.service.classId;
发起请求，返回结果展示到上边的form表单中
    Ext.Ajax.request({
        url: service.finishPrizeDetailUrl + "&userId=" + userId + "&classId=" + classId,
        method: 'POST',//请求方式
        type: 'json',
        success: function (response, options) {
            var data = response.responseText;
            var json = eval("(" + data + ")");

            if (json.finishPrizeStatus == 99){
                service.finishPrizeDetailWin.hide();
                Ext.Msg.alert('提示', '该用户不可发起');

                return ;
            } else if (json.finishPrizeStatus == 0) {
                service.finishPrizeDetailWin.hide();
                Ext.Msg.alert('提示', '该用户处于待发起状态');
                return ;
            } else {
                var status = service.finishPrizeStatusStore.getById(json.finishPrizeStatus).get("name");
                service.finishPrizeDetailPanel.getForm().findField("finishPrizeStatus").setValue(status);
            }
            service.finishPrizeDetailPanel.getForm().findField("finishPrizeEndDate").setValue(finishPrizeEndDate);
            service.finishPrizeDetailPanel.getForm().findField("finishPrizeDays").setValue(json.finishPrizeDays);
            service.finishPrizeDetailWin.setTitle('完课奖励详情');
            service.finishPrizeDetailWin.show();
        },
        failure: function (response, options) {
            var data = response.responseText;
            var json = eval("(" + data + ")");
            Ext.Msg.alert('提示', json.msg);
        }
    });
};

15。回车查询
//ID查询条件
studyCenterDaySign.daySignIdSearchField = new Ext.form.TextField({
    maxLength: 50,
    emptyText: 'ID',
    width: 80,
    listeners: {
        specialkey: function (field, e) {
            if (e.getKey() == Ext.EventObject.ENTER) {
                studyCenterDaySign.daySignFromCourseSearchAlert();
            }
        }
    }
});