zoukankan      html  css  js  c++  java
  • ExtJs3常用控件操作实例

    结合工作内容,不定期更新。这里面可能会讲到一些常用的组件的操作。

    json: {
        "total": 30,
        "data": [{
            "funcAlign": "C",
            "docNo": "ap5200_p",
            "descMsg": "账龄分析",
            "passWord": "",
            "allowModify": "N",
            "pageAlign": "C",
            "titleFontSize": 20,
            "funcFontSize": 8,
            "titleHeight": 40,
            "allowPrint": "N",
            "tableName": "ap_rs_age_analysis",
            "allowCopy": "N",
            "modelFlag": "1",
            "prtServer": "",
            "sqlStatament": "",
            "authNeeded": "N",
            "pageNeeded": "Y",
            "isMix": "N",
            "pwNeeded": "N",
            "pageSize": "KUANHANG",
            "companyName": "",
            "isRotate": "N",
            "companyCode": "01",
            "footer": "",
            "maxLine": 10000,
            "presentFontSize": 8,
            "xmlPath": "",
            "headFontSize": 8,
            "headAlign": "C"
        }

    1.gridPanel

    这个最常用,就是表格嘛,从后台接到收据的store里面读出数据,比如我传递了一个json,里面是对象的各个属性,那么我在前台显示的话,就要这样。

    其中有一个可以自己调整部分字体颜色,比如如果是Y就显示对号,是N就显示X号,截图如下:

    这个是关键点:

    renderer : function(value){
    
        return value=='Y'?'<b style="color:red">√ </span>':'<span style="color:green">否</span>'
    
    }

    this.gridPanel = new Ext.grid.GridPanel({
                                autoScroll : true,
                                region : 'center',
                                store : this.store,
                                sm : sm,
                                cm : new Ext.grid.ColumnModel([sm,
                                        new Ext.grid.RowNumberer({
                                                    header : '序号',
                                                    width : 35
                                                }), {
                                            xtype : 'actioncolumn',
                                            header : '操作',
                                            align : 'center',
                                            width : 60,
                                            items : [{
                                                        iconCls : 'report-pdf-edit',
                                                        tooltip : '修改',
                                                        handler : this.doEdit,
                                                        scope : this
                                                    }, {
                                                        iconCls : 'report-pdf-edit',
                                                        tooltip : '明细',
                                                        handler : this.openPdfHead,
                                                        scope : this
                                                    }]
        
                                        }, {
                                            dataIndex : 'docNo',
                                            sortable : true,
                                            header : '文档名称',
                                            width : 120,
                                            align : 'left'
                                        }, {
                                            dataIndex : 'descMsg',
                                            sortable : true,
                                            header : '抬头信息',
                                            width : 120,
                                            align : 'left'
                                        }, {
                                            header : '对应表名',
                                            dataIndex : 'tableName',
                                            width : 120,
                                            align : 'left'
                                        }, {
                                            header : '最大行数',
                                            dataIndex : 'maxLine',
                                            width : 120,
                                            align : 'right'
                                        }, {
                                            header : '题头字号',
                                            dataIndex : 'titleFontSize',
                                            width : 120,
                                            align : 'right'
                                        }, {
                                            header : '表头字号',
                                            dataIndex : 'headFontSize',
                                            width : 120,
                                            align : 'right'
                                        }, {
                                            header : '数据字号',
                                            dataIndex : 'presentFontSize',
                                            width : 120,
                                            align : 'right'
                                        }, {
                                            header : '题头高度',
                                            dataIndex : 'titleHeight',
                                            width : 120,
                                            align : 'right'
                                        }, {
                                            header : '纸张类型',
                                            dataIndex : 'pageSize',
                                            width : 120,
                                            align : 'center'
                                        }, {
                                            header : '横向打印',
                                            dataIndex : 'isRotate',
                                            width : 120,
                                            align : 'center',
                                            renderer : function(value){
                                                return value=='Y'?'<b style="color:red">√ </span>':'<span style="color:green">否</span>'
                                            }
                                        }, {
                                            header : '隔行变色',
                                            dataIndex : 'isMix',
                                            width : 120,
                                            align : 'center',
                                            renderer : function(value){
                                                return value=='Y'?'√ ':'X'
                                            }
                                        }, {
                                            header : 'sql语句',
                                            dataIndex : 'sqlStatament',
                                            width : 120,
                                            align : 'left'
                                        }])
                            });

    2. 单选框 new Ext.form.RadioGroup

    这个取值拿值是根据json里传来的值去自动判断的,所以前台只需要定义好你的Y值落在哪个单选框上即可。

    3.数字文本框 NumberField

    this.headWidth = new Ext.form.NumberField({
                        id : 'width',
                        name :'width',
                        fieldLabel : '宽度',
                        allowDecimals : false,//是否允许有小数点输入
                        minValue : 1,//最小值
                        width : 120
                    });

    4.下拉框 Ext.form.ComboBox

    this.align = new Ext.form.ComboBox({
                        id : 'align',
                        name : 'align',
                        fieldLabel : '对齐方式',//
                        width : 120,
                        displayField : 'alignName',
                        valueField : 'align',
                        mode : 'local',
                        triggerAction : 'all',
                        value : 'C',
                        store : new Ext.data.ArrayStore({
                                    fields : ['align', 'alignName'],
                                    data : [['L', 'L-居左'], ['C', 'C-居中'],
                                            ['R', 'R-居右']]
                                })
                    });

  • 相关阅读:
    PHP自动加载(__autoload和spl_autoload_register)
    抽象工厂模式
    工厂方法模式
    简单工厂模式
    组合
    二叉树的层次遍历 II
    umask命令
    二叉树的所有路径
    CDN缓存的理解
    Js中RegExp对象
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416482.html
Copyright © 2011-2022 走看看