Javascript - ExtJs - 其它

Posted 2020-09-29

设置组件标题栏宽度

listeners : {
        afterrender : function(panel) {
            var header = panel.header;
            header.setHeight(100);
        }
}

View Code

彻底去除组件的边框 

baseCls: ‘my-panel-no-border‘

View Code

设置组件的css

有时候setStyle()和applyStyles()方法都不起作用，比如displayfield框的文本的颜色，其实可以直接setValue时将html标签放进去。

var columnText = form.findField("columnText");
columnText.setValue("<font color=‘red‘>还没选择发布到哪个栏目</font>");

View Code

动态设置组件

利用Ajax可以轻易实现此需求，比如选中复选框、为输入框填入一个值等等。

//以下为formPanel配置了一个监听，在表单渲染完成之前通过Ajax获取服务端数据填充到表单的子组件（一个输入框里）
listeners: {
    beforerender: function () {
        Ext.Ajax.request({
            method: "POST",
            url: "AdminRoleHandler.ashx",
            params: { getRooleName: "true" },
            success: function (r) {
                var m = Ext.decode(r.responseText);
                //获取输入框组件
                var rooleName = Ext.getCmp("rooleName");
                rooleName.setValue(m.value);          
            },
            failure: function () {
                Ext.Msg.alert("提示", "http错误");
            }
        });
    }
}

//在服务端
string getRooleName = context.Request.Params["getRooleName"];
if (!string.IsNullOrEmpty(getRooleName))
{
    context.Response.Write("{value:‘sam‘}");
}

View Code

动态添加子组件

任何组件，如果其具备add方法，则可以利用这一性质配合Ajax动态为组件插入子组件。

//以下为formPanel配置了一个复选组，现在要通过后台返回的数据动态将子组件插入复选组
items: [
    {
        xtype: "checkboxgroup", fieldLabel: "系统管理", id:"systemConfig",defaults: { width: 120 }                             
    }
],
listeners: {
    beforerender: function () {
        Ext.Ajax.request({
            method: "POST",
            url: "AdminRoleHandler.ashx",
            params: { roleCheckbox: "true" },
            success: function (r) {
                var m = Ext.decode(r.responseText);
                //获取复选组组件                      
                var systemConfig = Ext.getCmp("systemConfig");
                systemConfig.add(m.items);
            },
            failure: function () {
                Ext.Msg.alert("提示", "http错误");
            }
        });
    }
}
//在服务端
string roleCheckbox = context.Request.Params["roleCheckbox"];
if (!string.IsNullOrEmpty(roleCheckbox))
{
    context.Response.Write("{ items:[ { boxLabel: ‘计算机‘, name: ‘rb‘, inputValue: ‘1‘ } ,{ boxLabel: ‘惠普‘, name: ‘ssa‘, inputValue: ‘1‘ }]}");
}

View Code