问答首页 悬赏问题 未解决 已解决 标签 专家问答 光荣榜 C币充值 我要提问 问答帮助
Ext.grid.PropertyGrid里的内容如何设置居右

[code="java"]
cis.repository.smap.PropertyGridPanel.superclass.constructor.call(this, {
id : 'propGrid',
title : this.resourceBundle.FieldLabel.RESULT,
frame : true,

    // autoHeight:true,
    hideHeaders : true,
    autoWidth : true,
    nameWidth : 400,
    valueWidth : 600,
              source : {}

});

Ext.extend(cis.repository.smap.PropertyGridPanel, Ext.grid.PropertyGrid, {});[/code]
如何设置PropertyGridPanel里固定左边表头居右，右边输出内容居左呢？？？ 很急啊，请教大家了
[b]问题补充：[/b]
楼下的 这个样式放哪里 能否详细点，你这样我还是不清楚。
[b]问题补充：[/b]
我是需要source里的固定的表头居右，输出内容居左。 这样式往哪里加啊？
[b]问题补充：[/b]
你有QQ 或MSN 吗， 我这问题很急
[b]问题补充：[/b]
这个好像没有用
[b]问题补充：[/b]
这是我的JSP页面setUserInfo.jsp，按你的加了样式
[code="java"]<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../../../common/gui_lib.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



    <script type="text/javascript"
        src="../../../scripts/repository/ux/XPropertyGrid.js"></script>
    <script type="text/javascript"
        src="${pageContext.request.contextPath}/scripts/repository/mobilehome/setUserInfo.js"></script>

    <script type="text/javascript"
        src="../../../scripts/repository/ux/RowFitLayout.js"></script>
    <style>  
  .ext-ie .x-menu-item-icon {left: -24px;}   
  .ext-strict .x-menu-item-icon {left: 3px;}   
  .ext-ie6 .x-menu-item-icon {left: -24px;}   

  .x-props-grid .x-grid3-hd-name{   
    text-align:right;   
  }   
  .x-props-grid .x-grid3-td-value{   
    text-align:left;   
  }   


    <script type="text/javascript">
 Ext.onReady(function() {
   Ext.QuickTips.init();

   var  formpanecondition = new  cis.repository.smap.QueryCondition();
   var  exPropertyGrid = new cis.repository.smap.PropertyGridPanel();



 var view=new Ext.Viewport(
      { 
        layout:'row-fit',
        frame:true,
        items:[formpanecondition,exPropertyGrid]
        });

      view.doLayout();
      renderTo:'tab1';
    });


</head>
<body>
    <div id="tab1"></div>
</body>

[/code]

这是我的JS文件setUserInfo.jsp
[code="java"]
Ext.ns("cis.repository.smap");

include('scripts/repository/locale/queryHomeUserInfo_zh.js');
include('scripts/repository/locale/common_zh.js');

cis.repository.smap.QueryCondition = function() {

var sequenceX = new Ext.form.TextField({
            allowBlank : false,
            fieldLabel : this.resourceBundle.FieldLabel.PHONENO,
            // labelSeparator : '',
            name : 'sequenceX',
            anchor : '95%'
        });

var queryButton = new Ext.Button({

    text : BUTTON_SEARCH,
    minWidth : COMMONDATA_QUERY_BUTTON,
    handler : function() {

        var mk = new Ext.LoadMask("propGrid", {
            msg : MSG_DATA_LOADING,
            removeMask : true
                // 完成后移除
            });
        mk.show(); // 显示
        // var updatePropertyBt = Ext.getCmp("edit-menuitem-btn");
        if (sequenceX.getValue() != '') {
            var sequence = sequenceX.getValue();
            Ext.Ajax.request({
                        url : '../../../extend/mobilehome/searchUserInfo.action',
                        method : 'POST',
                        timeout : "120000",
                        params : {
                            phoneNuber : sequence

                        },
                        success : function(form, action) {

                            // Ext.getCmp("propGrid").setSource({
                            // "msisdn" : "msisdn",
                            // "prefAreaFlag1" : "prefAreaFlag1"
                            // });
                            mk.hide();
                            var result = Ext.util.JSON
                                    .decode(form.responseText);
                            // alert(result.success);
                            // alert("result:" + result.data);
                            // alert(result.msg);
                            // var msisdn = "13957160043";
                            if (result.success == "true") {
                                var gridPanel = Ext.getCmp("propGrid");
                                //alert("---="+result.data.msisdn);
                                gridPanel.setSource({
                                    "用户号码" : result.data.msisdn,
                                    "业务状态" : result.data.serviceState,
                                    "内部套餐号" : result.data.innerPkgid
                                         ,
                                         "优惠区提醒开关" :
                                         result.data.serviceFlag1,
                                         "非优惠区提醒开关" :
                                         result.data.serviceFlag2,
                                         "提醒方式" :
                                         result.data.serviceFlag3,
                                         "业务申请时间" :
                                         result.data.createTime,
                                         "业务开通时间" : result.data.beginTime,
                                         "业务取消时间" : result.data.endtime,
                                         "最近一次提醒注册优惠区时间" :
                                         result.data.lstRegnotifyTime,
                                         "是否启用后备优惠区域1" :
                                         result.data.prefAreaFlag1,
                                         "优惠区1的一天内注册次数" :
                                         result.data.regareAcnt1,
                                         "优惠区域1的最近一次定位时间" :
                                         result.data.lstDetectTime1,
                                         "是否启用后备优惠区域2" :
                                         result.data.prefAreaFlag2,
                                         "优惠区2的一天内注册次数" :
                                         result.data.regareAcnt2,
                                         "优惠区域2的最近一次定位时间" :
                                         result.data.lstDetectTime2,
                                         "是否启用后备优惠区域3" :
                                         result.data.prefAreaFlag3,
                                         "优惠区3的一天内注册次数" :
                                         result.data.regareAcnt3,
                                         "优惠区域3的最近一次定位时间" :
                                         result.data.lstDetectTime3,
                                         "是否启用后备优惠区域4" :
                                         result.data.prefAreaFlag4,
                                         "优惠区4的一天内注册次数" :
                                         result.data.regareAcnt4,
                                         "优惠区域4的最近一次定位时间" :
                                         result.data.lstDetectTime4

                                    });

                                // alert("sdkfjslfjsf");
                                // gridPanel.load();
                                // alert(result.data);
                                // gridPanel.load(result.data);
                                // updatePropertyBt.enable();

                            } else {
                                Ext.Msg.show({
                                            title : MSG_TITLE,
                                            msg : result.msg,
                                            buttons : Ext.Msg.OK,
                                            icon : Ext.Msg.ERROR
                                        });
                            }
                        },
                        failure : function(form, action) {
                            // alert("failure");
                            mk.hide();
                            Ext.Msg.show({
                                        title : MSG_TITLE,
                                        msg : MSG_EXCEPTION,
                                        buttons : Ext.Msg.OK,
                                        icon : Ext.Msg.ERROR
                                    });
                        }
                    });

        } else {
            Ext.MessageBox.alert(MSG_TITLE, MSG_FIX_ERROR);
        }
    }
});

var resetbutton = new Ext.Button({
            text : this.resourceBundle.FieldLabel.RESET,
            handler : function() {
                queryPhoneNumber.reset();
            }

        });
cis.repository.smap.QueryCondition.superclass.constructor.call(this, {
            id : 'websmapquerycondition',
            title : MSG_QUERYCONDITON,
            width : '100%',
            collapsible : true,
            height : 70,
            bodyStyle : "padding:5px 10px 5px 10px",
            frame : true,
            defaults : {
                anchor : '90%'
            },
            items : [{
                        layout : "form",
                        xtype : 'panel',
                        baseCls : "x-plain",
                        labelAlign : 'right',
                        defaults : {
                            baseCls : "x-plain"
                        },
                        items : [{
                                    layout : "column",
                                    items : [{
                                                columnWidth : .33,
                                                layout : 'form',
                                                height : 25,
                                                labelAlign : 'left',
                                                labelWidth : 55,
                                                items : [sequenceX]
                                            }, {
                                                columnWidth : .1,
                                                layout : 'form',
                                                height : 25,
                                                buttonAlign : 'right',
                                                items : [queryButton]
                                            }]
                                }]
                    }]
        });

};

Ext.extend(cis.repository.smap.QueryCondition, Ext.form.FormPanel, {});

function updateFNOs(source) {
var jsonDataStr = null;

if (source) {
    jsonDataStr = Ext.encode(source);
}
if (jsonDataStr) {

    var mk = new Ext.LoadMask("propGrid", {
                msg : MSG_DATA_LOADING,
                removeMask : true
            });
    mk.show();

    var requestCg = {
        url : '../../../extend/mobilehome/editUserInfo.action',
        method : 'post',
        params : {
            jsonData : jsonDataStr
        },
        timeout : 120000,
        callback : function(options, success, response) {

            // alert(success + "\t" + response);

            mk.hide();
            mk.destroy();

            if (!success) {
                Ext.MessageBox.show({
                            title : MSG_TITLE,
                            msg : MSG_EXCEPTION,
                            icon : Ext.MessageBox.ERROR,
                            buttons : Ext.MessageBox.OK
                        });
            } else {
                if (response) {

                    var infoData = Ext.decode(response.responseText);
                    var msg = infoData.msg;
                    var operateRslt = infoData.success;

                    if (operateRslt && operateRslt != "true") {

                        Ext.MessageBox.show({
                                    title : MSG_TITLE,
                                    msg : msg,
                                    icon : Ext.MessageBox.ERROR,
                                    buttons : Ext.MessageBox.OK
                                });

                    } else {

                        Ext.MessageBox.show({
                                    title : MSG_TITLE,
                                    msg : msg,
                                    icon : Ext.MessageBox.INFO,
                                    buttons : Ext.MessageBox.OK
                                });
                    }
                }
            }
        }
    }
    Ext.Ajax.request(requestCg);

} else {
    return false;
}

}

cis.repository.smap.PropertyGridPanel = function() {
var menubar = new Ext.Toolbar({
items : [{
id : 'edit-menuitem-btn',
text : "修改",
disabled : true,
iconCls : 'edit',
icon : '../../../images/default/button/edit.gif',
handler : function() {
var grid = Ext.getCmp("propGrid");
if (grid) {
var source = grid.getSource();
updateFNOs(source);
this.disable();
}
}
}]
});

var pStore = new Ext.grid.PropertyStore({});
cis.repository.smap.PropertyGridPanel.superclass.constructor.call(this, {
    id : 'propGrid',
    title : this.resourceBundle.FieldLabel.RESULT,
    frame : true,

    // autoHeight:true,
    hideHeaders : true,
    autoWidth : true,
    nameWidth : 400,
    valueWidth : 600,
    // tbar : menubar,
    style:".x-props-grid .x-grid3-hd-name{ text-align:right;}",
    customEditors : {
        "是否启用后备优惠区域1" : new Ext.grid.GridEditor(new Ext.form.ComboBox({
                    editable : false,
                    displayField : 'prefAreaFlag1',
                    mode : 'local',
                    triggerAction : 'all',
                    selectOnFocus : true,
                    store : new Ext.data.SimpleStore({
                                fields : ['prefAreaFlag1'],
                                data : [['未开通'], ['使用正式优惠区'], ['使用后备优惠区']]
                            })
                }))
    },
    source : {
        "用户号码" : "",
        "业务状态" : "",
        "内部套餐号" : "",
        "优惠区提醒开关" : "",
        "非优惠区提醒开关" : "",
        "提醒方式" : "",
        "业务申请时间" : "",
        "业务开通时间" : "",
        "业务取消时间" : "",
        "最近一次提醒注册优惠区时间" : "",
        "是否启用后备优惠区域1" : "",
        "优惠区1的一天内注册次数" : "",
        "优惠区域1的最近一次定位时间" : "",
        "是否启用后备优惠区域2" : "",
        "优惠区2的一天内注册次数" : "",
        "优惠区域2的最近一次定位时间" : "",
        "是否启用后备优惠区域3" : "",
        "优惠区3的一天内注册次数" : "",
        "优惠区域3的最近一次定位时间" : "",
        "是否启用后备优惠区域4" : "",
        "优惠区4的一天内注册次数" : "",
        "优惠区域4的最近一次定位时间" : ""
    },



    buttons : [{
        text : '提交',
        handler : function() {
            var grid = Ext.getCmp("propGrid");
            if (grid) {
                var source = grid.getSource();

                var jsonDataStr = null;

                if (source) {
                    jsonDataStr = Ext.encode(source);
                }
                if (jsonDataStr) {

                    var mk = new Ext.LoadMask("propGrid", {
                                msg : MSG_DATA_LOADING,
                                removeMask : true
                            });
                    mk.show();

                    var requestCg = {
                        url : '../../../extend/mobilehome/editUserInfo.action',
                        method : 'post',
                        params : {
                            jsonData : jsonDataStr
                        },
                        timeout : 120000,
                        callback : function(options, success, response) {

                            // alert(success + "\t" + response);

                            mk.hide();
                            mk.destroy();

                            if (!success) {
                                Ext.MessageBox.show({
                                            title : MSG_TITLE,
                                            msg : MSG_EXCEPTION,
                                            icon : Ext.MessageBox.ERROR,
                                            buttons : Ext.MessageBox.OK
                                        });
                            } else {
                                if (response) {

                                    var infoData = Ext
                                            .decode(response.responseText);
                                    var msg = infoData.msg;
                                    var operateRslt = infoData.success;

                                    if (operateRslt
                                            && operateRslt != "true") {

                                        Ext.MessageBox.show({
                                                    title : MSG_TITLE,
                                                    msg : msg,
                                                    icon : Ext.MessageBox.ERROR,
                                                    buttons : Ext.MessageBox.OK
                                                });

                                    } else {

                                        Ext.MessageBox.show({
                                                    title : MSG_TITLE,
                                                    msg : msg,
                                                    icon : Ext.MessageBox.INFO,
                                                    buttons : Ext.MessageBox.OK
                                                });
                                    }
                                }
                            }
                        }
                    }
                    Ext.Ajax.request(requestCg);

                } else {
                    return false;
                }
            }
        }
    }, {
        text : this.resourceBundle.FieldLabel.RESET,
        handler : function() {
            Ext.getCmp("propGrid").getSource();
        }
    }],
    buttonAlign : 'center'

});

};

Ext.extend(cis.repository.smap.PropertyGridPanel, Ext.grid.PropertyGrid, {});
[/code]
[b]问题补充：[/b]
第二个是setUseInfo.js文件。
[b]问题补充：[/b]
你本地测试的NAME所对应的 ，明显是居左么。 怎么没问题啊？
[b]问题补充：[/b]
我的结果:
[img]http://www.iteye.com/upload/attachment/141323/d3f5de22-b4bf-378d-bd16-50245bbbe79d.jpg[/img]
[b]问题补充：[/b]
我加了.x-props-grid .x-grid3-col-name{

text-align:right;

}

第一列内容还是居左的。
[b]问题补充：[/b]
好了 好了，谢谢你的帮助，很感谢。EXTJS还有很多不懂的地方，希望多多指教 。
[b]问题补充：[/b]
我能知道你的MSN吗，我的是itzhoujia@hotmail.com.

ext javascript

9个回答

按赞数排序

晕,你不是说只是标题右对齐么...

内容的话:

[code="html"]
/*第一列表头对齐方式*/
.x-props-grid .x-grid3-hd-name{
text-align:right;
}
/*第一列内容对齐方式*/
.x-props-grid .x-grid3-col-name{
text-align:right;
}
/*第二列表头对齐方式*/
.x-props-grid .x-grid3-td-value{
text-align:left;
}
/*第二列内容对齐方式*/
.x-props-grid .x-grid3-col-value{
text-align:left;
}
[/code]

两句样式即可:

[code="html"] .x-props-grid .x-grid3-hd-name{
text-align:left;
}
.x-props-grid .x-grid3-td-value{
text-align:center;
}[/code]

自己改right/left

[code="java"].x-props-grid .x-grid3-hd-name{
text-align:right;
}
.x-props-grid .x-grid3-td-value{
text-align:left;
}[/code]

CSS样式啊,放在你的html/jsp/php中

just try.

[code="html"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



ExtJS Test


<br> <style><br> .ext-ie .x-menu-item-icon {left: -24px;}<br> .ext-strict .x-menu-item-icon {left: 3px;}<br> .ext-ie6 .x-menu-item-icon {left: -24px;}</p> <pre><code> .x-props-grid .x-grid3-hd-name{ text-align:right; } .x-props-grid .x-grid3-td-value{ text-align:left; } </code></pre> <p></style></p> <script> Ext.onReady(function() { var propsGrid = new Ext.grid.PropertyGrid({ renderTo: Ext.getBody(), width: 300, autoHeight: true, propertyNames: { tested: 'QA', borderWidth: 'Border Width' }, source: { '(name)': 'Properties Grid', grouping: false, autoFitColumns: true, productionQuality: false, created: new Date(Date.parse('10/15/2006')), tested: false, version: 0.01, borderWidth: 1 }, viewConfig : { forceFit: true, scrollOffset: 2 // the grid will never have scrollbars } }); });




[/code]

测试文件如附件,[url]http://app.iteye.com/topics/download/a0a85fb1-f345-324f-a83a-d705be6e8238[/url]
自己试下.
我本地测试没问题
[img]/upload/attachment/141307/cb48d929-0ca4-3af1-affc-209830021c60.jpg[/img]

你把上面的样式换到我发给你的示例里面,跑跑看看

你的代码我抽出那部分来跑了,还是没问题.
你还是把我给你的代码跑一次看看.

或者用firebug看看这个样式有没有应用到对应的dom.

搞定就好.记得结贴哈.

发你JE短消息了.

Csdn user default icon
插入链接
本地上传 网络图片
上传中...
上传图片
插入图片
抄袭、复制答案，以达到刷声望分或其他目的的行为，在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了！
我要提问
立即提问