[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.
微信扫一扫![http://www.iteye.com/upload/attachment/141323/d3f5de22-b4bf-378d-bd16-50245bbbe79d.jpg[/img]](http://www.iteye.com/upload/attachment/141323/d3f5de22-b4bf-378d-bd16-50245bbbe79d.jpg%5B/img%5D){kind=link}