• ExtJs4常用配置方法备忘


    viewport布局常用属性

    复制代码
                new Ext.Viewport({
                    layout: "border",
                    renderTo: Ext.getBody(),
                    defaults: {
                        bodyStyle: "background-color: #FFFFFF;",
                        frame: true
                    },
                    //split为true,即可达到上下左右拉伸效果
                    //layout:fit,填满布局
                    //collapsible:true,north模块被收缩到最上面
                    items: [{ region: "north", height: "60%", collapsible: true, split: true, layout: "fit", border: true, items: [ClassTreeGrid] },
                            { region: "center", autoScroll: true, split: true, border: true, layout: "fit", items: [RecGrid] }
                    ]
                });
    复制代码

    Ext.window.Window拉伸属性,以及textareafield,form的可拉伸属性

    提醒:resizable: true, //是否可以拉伸,同时也适用于textareafield,form等

    复制代码
     var AddDialog = Ext.create("Ext.window.Window", {
                    layout: "fit",
                    iconCls: 'a_add',
                    closeAction: 'hide',        //窗口关闭的方式:hide/close
                    resizable: true,            //是否可以拉伸
                    closable: true,            //是否可以关闭
                    modal: true,                //是否为模态窗口
                    items: AddForm,
                    buttons: [{
                        text: '添加',
                        iconCls: 'a_add',
                        id: "btnAdd",
                        handler: Add
                    },
                    {
                        id: "btnCancel",
                        iconCls: 'a_cross',
                        text: '重置',
                        handler: function () {
                            AddForm.form.reset();
                        }
                    }]
                });
    复制代码

    为空默认值,验证配置,及验证方法,column布局

    复制代码
     var AddForm = Ext.create("Ext.form.Panel", {
                    border: false,
                    fieldDefaults: {
                        msgTarget: 'side',  //提示信息在右旁边显示图标
                        labelWidth: 70,
                        align: "right",
                        allowBlank: false //不与许为空
                    },
                     380,
                    defaults: {
                        padding: 10,
                    },
                    layout: 'column',
                    items: [
                         {
                             xtype: "hidden",
                             name: 'quId',
                         },
                          {
                              xtype: "numberfield",
                              fieldLabel: '第几题',
                              name: 'sorts',
                              regex: /^d+$/,  //正则验证
                              maxLength: 100,
                              columnWidth: 1,
                          },
                        {
                            xtype: "combo",
                            fieldLabel: '皮肤分类',
                            name: 'claId',
                            id: 'claId',
                            valueField: 'qcId',
                            displayField: 'claName',
                            columnWidth: 1,   //列布局站的比例,总共为1,多分为0.5+0.5 ....和为1 
                            allowBlank: false,
                            store: QuestionClassStore,
                            emptyText: "请选择皮肤分类", //为空输入框暗灰提示
                            blankText: "请选择皮肤分类111", //错误提示
                        },
                         {
                             xtype: "filefield",
                             fieldLabel: '上传图片',
                             buttonText: '  浏 览  ',
                             regex: /^.+.((jpg)|(gif)|(gif)|(png)|(jpeg)|(bmp))$/, //正则验证
                             name: 'queImg',
                             allowBlank: true, //不允许为空
                             columnWidth: 1
                         },
                         {
                             xtype: "textareafield",
                             grow: true,
                             fieldLabel: '问题',
                             name: 'question',
                             columnWidth: 1
                         }
    
                    ]
                });
    
                //添加问题
                function Add() {
                    var form = AddForm.getForm();  //获取表单form
                    if (form.isValid()) {   //验证表单
                        form.submit({
                            url: "/question/Add",
                            params: { json: Ext.JSON.encode(AddForm.form.getValues()) },
                            waitMsg: '正在上传请稍候...',
                            success: function (form, action) {
                                Ext.Msg.alert("提示", action.result.msg);
                                QuestionGridStore.load();
                            },
    
                        })
                    }
                }
    复制代码

    给img的路径src赋值

    复制代码
                   itemclick: function () {
                            var rows = ShopPaperGrid.getView().getSelectionModel().getSelection();
                            if (typeof (rows[0]) != "undefined") {
                                Ext.getCmp("imgForm").getEl().dom.src = rows[0].data.imgPath;   //给src赋值
                            }
                            else {
                                Ext.getCmp("imgForm").getEl().dom.src = "/images/default.jpg";
                            }
                        }
    复制代码

    ext.msg.confrim()

    复制代码
       Ext.Msg.confirm("提示", "确定删除", function (btn) {
                    //btn=yes或者no
                    if (btn == "yes") {
                        alert("删除成功");
                    }
                    else {
                        alert("取消啦删除");
                    }
                });
  • 相关阅读:
    Socket实现Web应用的本质
    板凳要坐十年冷 代码不写一句空
    Python写的刷QB钓鱼盗号软件
    除法细节_Python小知识点00005
    标识符,变量的命名_Python小知识00003
    类和ID选择器的区别
    十分钟搞定CSS选择器
    HTML引入CSS样式三种方法及优先级
    CSS代码语法
    html form <label>标签基础语法结构与使用案例教程
  • 原文地址:https://www.cnblogs.com/felix-/p/4325505.html
Copyright © 2020-2023  润新知