extjs設置字體大小_Extjs 文本域能設置字體嗎

① Extjs 文本域能設置字體嗎

可以設置的配置時有一個配置項

cls : String

一個可選添加的CSS樣式類，加入到組件的元素上回（默認為''）。這為答組件或組件的子節點加入標准CSS規則提供了方便

用法實例:

<body>
<styletype="text/css">
.myCls{
color:red;font-size:20;
}
</style>
<scripttype="text/javascript">
Ext.create('Ext.panel.Panel',{
items:[
{
xtype:'label',
text:'這里的文字是紅色',
cls:'myCls'
}
],
renderTo:Ext.getBody()
})
</script>
</body>

② 如何設置EXTJS GridPande行內字體大小

var cm = new Ext.grid.ColumnModel([
{
header:'播放類型',
dataIndex:'type',
id : 0,
renderer:function(value){
return "<span style="font-size:14px;">" + value + "</span>";
}
}]);

③ extjs中如何獲得textfield的id 然後設置數據字體的顏色

首先

//獲取文本控制項
vartextfield=Ext.getCmp('txtProfitLast');
//設置字體顏色
textfield.setFieldStyle({color:'#555555'});

給你示例的用的是Extjs4，不知道你用的什麼版本，可以回多看看API

希望能幫助到答你

④ Extjs 中如何改變textfield的標簽的字體大小

設置labelStyle屬性

⑤ extjs grid 列頭分行

/**

* 表格綜合示例

* @author XiongChun

* @since 2010-10-20

Ext.onReady(function() {

group1 = [{}, {

header : '分組1-1a',

colspan : 4,

align : 'center'

}, {}, {

header : '分組1-3',

colspan : 5,

align : 'center'

}];

var group2 = [{}, {

header : '分組2-1',

colspan : 2,

align : 'center'

}, {

header : '分組2-2',

colspan : 2,

align : 'center'

}, {

header : '單位',

rowmerge:true,

domid:'group_dw',

align : 'center'

}, {

header : '分組2-3',

colspan : 2,

align : 'center'

}, {

header : '分組2-4',

colspan : 3,

align : 'center'

}];

var group = new Ext.ux.grid.ColumnHeaderGroup({

rows : [group1, group2]

});

var group = new Ext.ux.plugins.GroupHeaderGrid({

rows : [group1, group2]

});

// 定義自動當前頁行號

var rownum = new Ext.grid.RowNumberer({

header : 'NO',

width : 28

});

// 復選框

var sm = new Ext.grid.CheckboxSelectionModel();

// 定義列模型

var cm = new Ext.grid.ColumnModel([rownum, {

header : '項目ID', // 列標題

dataIndex : 'xmid', // 數據索引:和Store模型對應

sortable : true

// 是否可排序

}, {

header : '項目名稱',

dataIndex : 'xmmc',

sortable : true,

width : 200

}, {

header : '項目熱鍵',

dataIndex : 'xmrj'

}, {

header : '規格',

dataIndex : 'gg'

}, {

dataIndex : 'dw',

align:'center',

fixed:true,

width : 60

}, {

header : '啟用狀態',

dataIndex : 'qybz',

// 演示render的用法(代碼轉換,該render由<G4Studio:ext.codeRender/>標簽生成)

renderer : QYBZRender,

width : 60

}, {

header : '劑型',

dataIndex : 'jx',

width : 60

}, {

header : '產地',

dataIndex : 'cd',

width : 200

}, {

header : '醫院編碼',

dataIndex : 'yybm'

}, {

header : '更改時間',

dataIndex : 'ggsj'

}]);

/**

* 數據存儲

var store = new Ext.data.Store({

// 獲取數據的方式

proxy : new Ext.data.HttpProxy({

url : 'gridDemo.do?reqCode=querySfxmDatas'

}),

// 數據讀取器

reader : new Ext.data.JsonReader({

totalProperty : 'TOTALCOUNT', // 記錄總數

root : 'ROOT' // Json中的列表數據根節點

}, [{

name : 'xmid' // Json中的屬性Key值

}, {

name : 'sfdlbm'

}, {

name : 'xmmc'

}, {

name : 'xmrj'

}, {

name : 'gg'

}, {

name : 'dw'

}, {

name : 'qybz'

}, {

name : 'jx'

}, {

name : 'cd'

}, {

name : 'yybm'

}, {

name : 'ggsj'

}])

});

/**

* 翻頁排序時候的參數傳遞

// 翻頁排序時帶上查詢條件

store.on('beforeload', function() {

this.baseParams = {

xmmc : Ext.getCmp('xmmc').getValue()

};

});

// 每頁顯示條數下拉選擇框

var pagesize_combo = new Ext.form.ComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new Ext.data.ArrayStore({

fields : ['value', 'text'],

data : [[10, '10條/頁'], [20, '20條/頁'],

[50, '50條/頁'], [100, '100條/頁'],

[250, '250條/頁'], [500, '500條/頁']]

}),

valueField : 'value',

displayField : 'text',

value : '20',

editable : false,

width : 85

});

var number = parseInt(pagesize_combo.getValue());

// 改變每頁顯示條數reload數據

pagesize_combo.on("select", function(comboBox) {

bbar.pageSize = parseInt(comboBox.getValue());

number = parseInt(comboBox.getValue());

store.reload({

params : {

start : 0,

limit : bbar.pageSize

}

});

// 分頁工具欄

var bbar = new Ext.PagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '顯示{0}條到{1}條,共{2}條',

plugins : new Ext.ux.ProgressBarPager(), // 分頁進度條

emptyMsg : "沒有符合條件的記錄",

items : ['-', '  ', pagesize_combo]

});

// 表格工具欄

var tbar = new Ext.Toolbar({

items : [{

xtype : 'textfield',

id : 'xmmc',

name : 'xmmc',

emptyText : '請輸入項目名稱',

width : 150,

enableKeyEvents : true,

// 響應回車鍵

listeners : {

specialkey : function(field, e) {

if (e.getKey() == Ext.EventObject.ENTER) {

queryCatalogItem();

}

}, {

text : '查詢',

iconCls : 'page_findIcon',

handler : function() {

queryCatalogItem();

}

}, {

text : '刷新',

iconCls : 'page_refreshIcon',

handler : function() {

store.reload();

}

},'->' ,{

text : '重設列標題',

iconCls : 'acceptIcon',

handler : function() {

cm.setColumnHeader('2','開天闢地');

}

}, {

text : '重設分組列標題',

iconCls : 'acceptIcon',

handler : function() {

Ext.getDom('group_dw').innerHTML = '開天闢地';

}

}]

});

// 表格實例

var grid = new Ext.grid.GridPanel({

// 表格面板標題,默認為粗體，我不喜歡粗體，這里設置樣式將其格式為正常字體

title : '<span class="commoncss">表格綜合演示七(表頭分組支持)</span>',

height : 500,

frame : true,

autoScroll : true,

region : 'center', // 和VIEWPORT布局模型對應，充當center區域布局

margins : '3 3 3 3',

store : store, // 數據存儲

stripeRows : true, // 斑馬線

cm : cm, // 列模型

tbar : tbar, // 表格工具欄

bbar : bbar,// 分頁工具欄

plugins : group,

viewConfig : {

// 不產橫向生滾動條, 各列自動擴展自動壓縮, 適用於列數比較少的情況

// forceFit : true

loadMask : {

msg : '正在載入表格數據,請稍等...'

}

});

// 頁面初始自動查詢數據

// store.load({params : {start : 0,limit : bbar.pageSize}});

// 布局模型

var viewport = new Ext.Viewport({

layout : 'border',

items : [grid]

});

// 查詢表格數據

function queryCatalogItem() {

store.load({

params : {

start : 0,

limit : bbar.pageSize,

xmmc : Ext.getCmp('xmmc').getValue()

}

});

}

});

⑥ extjs中怎樣為一個可收縮collapsible的panel設置標題欄(標題欄文字有各種顏色的和各種字體的)

是這樣設置bodyStyle:'background:#ffc;padding:10px;',varresultsPanel=Ext.create('Ext.panel.Panel',{title:'Results',width:600,height:400,renderTo:Ext.getBody(),bodyStyle:'background:#ffc;padding:10px;',layout:{type:'vbox',//:'stretch',//Eachtakesupfullwidthpadding:5},items:[{//'grid'xtype:'grid',columns:[{header:'ColumnOne'}],//Oneheaderjustforshow.There'snodata,store:Ext.create('Ext.data.ArrayStore',{}),//Ammyemptydatastoreflex:1//Use1/3ofContainer'sheight(hinttoBoxlayout)},{xtype:'splitter'//},{//(noxtypedefaultsto'panel').title:'Details',bodyPadding:10,items:[{fieldLabel:'Dataitem',xtype:'textfield'}],//Anarrayofformfieldsflex:2//Use2/3ofContainer'sheight(hinttoBoxlayout)}]});

⑦ extjs tab問題，大小能設置么我不是問面板能不能改變大小，而是這個選項卡標簽能不能設置大小

可以、查看這個config屬性：
tabWidth : Number
The initial width in pixels of each new tab (defaults to 120)

⑧ Extjs控制文本輸入字數，超出設定輸入字數後彈框提示用戶，怎麼做

如果是textfield設置maxlength,校驗如果超出長度會提示信息；

Ext.create('Ext.form.Panel',{
title:'ContactInfo',
width:300,
bodyPadding:10,
renderTo:Ext.getBody(),
items:[{
xtype:'textfield',
name:'name',
fieldLabel:'Name',
maxLength:5,
allowBlank:false//requiresanon-emptyvalue
},{
xtype:'textfield',
name:'email',
fieldLabel:'EmailAddress',
vtype:'email'//
}]
});

xtype:'textfield',
name:'name',
enableKeyEvents:true,
fieldLabel:'Name',
allowBlank:false,//requiresanon-emptyvalue
listeners:{
keypress:function(o,e){
//TO-DOo.value.length...
}
}

導航:首頁 > 編程語言 > extjs設置字體大小

extjs設置字體大小

與extjs設置字體大小相關的資料

友情鏈接