extjs居中

❶ Extjs問題，我想居中顯示欄位，但他一直是居左顯示，代碼如下 ：

align: 'center',
加上這個屬性應該就可以了，要是不行，把你代碼貼出來看看

❷ ExtJS中Panel怎樣居中顯示，region:'center'不行。

region屬性對應的是border布局.可以考慮用Div+Css的方法,在頁面中先定義一個id='XXX'的Div,用Css將這個Div居中,然後使用Ext組件的appendTo:'XXX'.這是一種思路,樓主如果稍微有點Css基礎應該就會明白

❸ Extjs如何讓後台的用戶登錄窗口始終都處在瀏覽器窗口的居中位置

可以採用絕對定位的方式，使用js代碼計算顯示的位置，同時綁定window的resize事件，當窗口大小改變後，重新計算顯示的位置。

❹ extjs table 文字垂直居中 怎樣使單元格的文字縱向居中

瀏覽器打開開發人員專工作屬F12

.x-grid3-row td, .x-grid3-summary-row td {

line-height: 13px;

vertical-align: middle;

padding-left: 1px;

padding-right: 1px;

-moz-user-select: none;

-khtml-user-select: none;

-webkit-user-select: ignore;

}

❺ ExtJS如何使panel的內容居中顯示

layout: {
align: 'middle',
pack: 'center',
type: 'hbox'

}

如圖示，fieldset居中了，textfield也居中了

❻ 關於EXTJS textfield 居中排列

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:
}),
buttons : [ {
text : '添加',
handler : function() {
var docId = (new String(addPermissionWindowDocIDField.getValue())).substring(5);
var docName = (new String(.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(.root, SearchText.getValue());
}

var searchRecentlyUserThreadId = null;

var SearchText = 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 = new Ext.form.Checkbox({
margins:'7 0 5 5',
width: 80,
align: 'center',
boxLabel :'只讀',
checked:true
});

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

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

var = 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:[, , , ],
buttons : [{
text : '確定',
handler: function(){
var roleString = '';
if(.getValue()){
roleString += ',只讀';
}
if(.getValue()){
roleString += ',編輯';
}
if(.getValue()){
roleString += ',水印列印';
}
if(.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(.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』沒用