zoukankan      html  css  js  c++  java
  • 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("取消啦删除");
                    }
                });

    先写这么多,现在想不起来啦,想起来再加上,做为备忘博客 

  • 相关阅读:
    php模拟http请求的方法
    快递100接口开发
    live555从RTSP服务器读取数据到使用接收到的数据流程分析
    VLC源码分析知识总结
    VLC播放器架构剖析
    Android Audio System 之一:AudioTrack如何与AudioFlinger
    VLC各个Module模块之间共享变量的实现方法
    流媒体开发之--HLS--M3U8解析(2): HLS草案
    M3U8格式讲解及实际应用分析
    通用线程:POSIX 线程详解,第 3 部分 条件互斥量(pthread_cond_t)
  • 原文地址:https://www.cnblogs.com/knowledgesea/p/3912996.html
Copyright © 2011-2022 走看看