Question

在EXTJS中，我需要把一个Panel中的几个textfield文本框居中 或者居右排列。

在EXTJS中，我需要把一个Panel中的几个textfield文本框居中 或者居右排列，要设哪个属性？？

Answer 1

试试style:'text-align:center'，应该可以。

Answer 2

可以在panel中设计layout为absolute 然后 调整textfield的x与y的值

Answer 3

Ext.onReady(function(){

var DocumentRecord = Ext.data.Record.create([{
name: 'docId',
type: 'String'
},{
name: 'docName',
type: 'String'
}]);

var searchTplStore = new Ext.data.JsonStore({
autoDestroy: true,
root: "documents",
totalProperty: "total",
url: "documentPermission/docsearch",
fields: DocumentRecord
});

var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-doc" style="padding:1px 5px;">',
'<h3><span></span></h3>',
'ID：',
'</div></tpl>'
);

var searchDocumentCB = new Ext.form.ComboBox({
id:'searchDocumentCB',
name:'docName',
store: searchTplStore,
displayField:'docName',
typeAhead: true,
loadingText: '正在搜索...',
pageSize:0,
width:200,
minChars:0,
hideTrigger:false,
tpl: resultTpl,
queryParam: 'docName',
itemSelector: 'div.search-doc',
onSelect: function(record){ // override default onSelect to do redirect
this.setValue(record.get('docName'));
this.collapse();
},
listeners : {
'beforequery': function(queryEvent){
if(!this.isExpanded()){
var isFound = false;
this.getStore().each(function(record){
if(record.get('docName') == searchDocumentCB.getValue()){
isFound = true;
}
});
if(isFound){
queryEvent.query = '';
}
}
}
}
});

var documentPermission = Ext.data.Record.create([{
name: 'docName',
type: 'string'
}, {
name: 'rawUserName',
type: 'string'
}, {
name: 'permissionString',
type: 'string'
}, {
name: 'userId',
type: 'string'
}, {
name: 'docId',
type: 'string'
}]);

var addPermissionRecord = Ext.data.Record.create([{
name: 'docName',
type: 'string'
}, {
name: 'rawUserName',
type: 'string'
}, {
name: 'permissionString',
type: 'string'
}, {
name: 'userId',
type: 'string'
}, {
name: 'docId',
type: 'string'
},{
name:'isOld',
type: 'boolean'
},{
name:'startDate',
type:'date'
},{
name:'endDate',
type:'date'
},{
name:'time',
type:'int'
}]);

/////////////添加权限时左侧职位Tree//////////////////////
var addPermissionWindowTitleTree = new Ext.tree.TreePanel( {
//title : '用户列表',
useArrows : true,
autoScroll : true,
animate : true,
enableDD : false,
containerScroll : true,
rootVisible : true,
root : new Ext.tree.AsyncTreeNode( {
nodeType : "async",
id : "title_all",
text : "#######",
checked: false
}),

tbar:new Ext.Toolbar({
layout:'fit',
items:addPermissionWindowTitleTreeSearchText
}),
buttons : [ {
text : '添加',
handler : function() {
var docId = (new String(addPermissionWindowDocIDField.getValue())).substring(5);
var docName = (new String(addPermissionWindowDocNameField.getValue())).substring(5);
var msg = '', selNodes = addPermissionWindowTitleTree.getChecked();
if(selNodes.length > 1){
selectedNodes = selNodes;
setPermissionWindow.isAdd = true;
setPermissionWindow.show();
}
else{
Ext.each(selNodes, function(node) {
if(!node.disabled && !node.hidden && node.isLeaf() && addPermissionWindowStore.find('userId',node.attributes.mail)==-1){
addPermissionWindowStore.add(new addPermissionRecord());
}
});
}

}
}],
dataUrl : 'person1/searchTitle',
flex : 0.5
});

//搜索方法
function beginSearchRecentlyUserNode(){
searchNodes(addPermissionWindowRecentlyUserTree.root, addPermissionWindowRecentlyUserTreeSearchText.getValue());
}

var searchRecentlyUserThreadId = null;

var addPermissionWindowRecentlyUserTreeSearchText = new Ext.form.TextField({
emptyText: '键入关键字进行搜索',
enableKeyEvents: true,
listeners: {
'keyup': function(thiz, e){
if(searchRecentlyUserThreadId){
window.clearTimeout(searchRecentlyUserThreadId);
searchRecentlyUserThreadId = null;
}
searchRecentlyUserThreadId = window.setTimeout(beginSearchRecentlyUserNode,1000);
}
}
});

/////////////添加权限时右侧Grid//////////////////////
var addPermissionWindowGrid = new Ext.grid.GridPanel( {
//ddGroup : 'gridDDGroup',
store : addPermissionWindowStore,
flex: 1,
plugins: [editor],
columns : [ {
id : 'rawUserName',
header : "用户名",
width : 1,
sortable : true,
dataIndex : 'rawUserName'
}, {
header : "权限",
width : 3,
sortable : true,
dataIndex : 'permissionString',
editor: {
id: "DocPermission_permissionsGroup",
xtype: 'aliascheckboxgroup',
items: [
,
,
,

],
listeners: {
afterrender: function(group) {
}
}
}
} ],
viewConfig: {
columnsText : "显示/隐藏列",
sortAscText : "正序排列",
sortDescText : "倒序排列",
forceFit: true,
scrollOffset: 0
},
enableDragDrop : true,
title : '权限',
selModel : new Ext.grid.RowSelectionModel( {
singleSelect : false
}),
buttons : [ {
id:'btn_addPermissionWindowGrid_remove',
text : '移除',
listeners:{
'click':function(sender, e){
var selecttions = addPermissionWindowGrid.getSelectionModel().getSelections();
Ext.each(selecttions,function(item){
if(item.get('isOld')){
delPermissionWindowStore.add(item);
var rootNode=addPermissionWindowTree.root;
var curNode=findChildNode(rootNode,item.get('rawUserName'));
if(curNode!=null){
curNode.enable();
}
}
var i = addPermissionWindowGrid.getStore().indexOf(item);
addPermissionWindowGrid.getStore().removeAt(i);
});
}
}
} ]
});

var setPermissionWindowPermission1ChkBox = new Ext.form.Checkbox({
margins:'7 0 5 5',
width: 80,
align: 'center',
boxLabel :'只读',
checked:true
});

var setPermissionWindowPermission2ChkBox = new Ext.form.Checkbox({
margins:'7 0 5 5',
width: 80,
align: 'center',
boxLabel :'编辑'
});

var setPermissionWindowPermission7ChkBox = new Ext.form.Checkbox({
margins:'7 0 5 5',
width: 80,
align: 'center',
boxLabel :'水印打印'
});

var setPermissionWindowPermission11ChkBox = new Ext.form.Checkbox({
margins:'7 0 5 5',
width: 80,
align: 'center',
boxLabel :'再授权'
});

var selectedNodes = new Array();
var setPermissionWindow = new Ext.Window({
title : "批量授权",
width : 400,
height : 100,
resizable : true,
modal : true,
maximizable : false,
closeAction : "hide",
layout : "column",
layoutConfig:{
align: "center"
},
items:[setPermissionWindowPermission1ChkBox, setPermissionWindowPermission2ChkBox, setPermissionWindowPermission7ChkBox, setPermissionWindowPermission11ChkBox],
buttons : [{
text : '确定',
handler: function(){
var roleString = '';
if(setPermissionWindowPermission1ChkBox.getValue()){
roleString += ',只读';
}
if(setPermissionWindowPermission2ChkBox.getValue()){
roleString += ',编辑';
}
if(setPermissionWindowPermission7ChkBox.getValue()){
roleString += ',水印打印';
}
if(setPermissionWindowPermission11ChkBox.getValue()){
roleString += ',再授权';
}
if(roleString.length > 0)
roleString = roleString.substring(1);
if(roleString.length == 0)
roleString = "只读";
if(setPermissionWindow.isAdd){
var docId = (new String(addPermissionWindowDocIDField.getValue())).substring(5);
var docName = (new String(addPermissionWindowDocNameField.getValue())).substring(5);
var selNodes = selectedNodes;//addPermissionWindowTree.getChecked();
Ext.each(selNodes, function(node) {
if(!node.disabled && !node.hidden && node.isLeaf() && addPermissionWindowStore.find('userId',node.attributes.mail)==-1){
addPermissionWindowStore.add(new addPermissionRecord());
}
});
}
else{
var selecttions = addPermissionWindowGrid.getSelectionModel().getSelections();
Ext.each(selecttions,function(item){
item.set('permissionString', roleString);
});
}
setPermissionWindow.hide();
}
},{
text : '取消',
handler: function(){
setPermissionWindow.hide();
}
}]
});
});

代码太多，我有所删减，align：‘center’没用