本文目录一览：
- 1、extjs 中怎样修改Ext.Toolbar的背景色
- 2、Extjs 怎样重新设置文本框背景色
- 3、extjs 设置背景色
- 4、Extjs对于设置表格的背景颜色问题
- 5、extjs怎么设置背景颜色
- 6、Extjs下的按钮的背景色和文字的颜色具体应该如何设置呢?
extjs 中怎样修改Ext.Toolbar的背景色
可以设置style也可以设置cls属性即引定义好的CSS样式,为其设置背景图片，或者将背景图片设为空指定背景颜色：
法1：
var toolbar = new Ext.Toolbar({
style: 'background-color:Red; background-image:url();',
renderTo: 'toolbarDiv',
items: [{
text: '测试按钮',
handler: function() { }
}, {
xtype:'label',
text:'测试文字'
}]
});
法2：
var toolbar = new Ext.Toolbar({
cls: "toolbar",
renderTo: 'toolbarDiv',
items: [{
text: '测试按钮',
handler: function() { }
}, {
xtype:'label',
text:'测试文字'
}]
});
设置css样式toolbar:
style type="text/css"
.toolbar{ background-color:Red; background-image:url(); }
/style
Extjs 怎样重新设置文本框背景色
如果是extjs的field , 都有 blur , focus 的事件var field = Ext.create("Ext.form.field.Text" , { listeners:{ blur: function(){ //失去焦点事件 } , focus: function(){ //获取焦点 } }});//如果是通过extjs操作当前页面中的input..//这是Input//var el = Ext.get("a");a.on({ blur: function(){ //失去焦点事件 } , focus: function(){ //获取焦点 }});
extjs 设置背景色
是这样设置 bodyStyle: 'background:#ffc; padding:10px;',
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
bodyStyle: 'background:#ffc; padding:10px;',
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [{header: 'Column One'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}, {
xtype: 'splitter' // A splitter between the two child items
}, { // Details Panel specified as a config object (no xtype defaults to 'panel').
title: 'Details',
bodyPadding: 10,
items: [{
fieldLabel: 'Data item',
xtype: 'textfield'
}], // An array of form fields
flex: 2 // Use 2/3 of Container's height (hint to Box layout)
}]
});
求采纳为满意回答。
Extjs对于设置表格的背景颜色问题
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titlegridPanel背景颜色/title
link rel="stylesheet" type="text/css" href="scripts/extjs-4.1.0/resources/css/ext-all.css"/
script type="text/javascript" src="scripts/extjs-4.1.0/ext-all.js"/script
style type="text/css"
.x-grid-cell.bgColor1{
background-color: red !important;;
}
.x-grid-cell.bgColor2{
background-color: yellow;
}
/style
script type="text/javascript"
Ext.onReady(function(){
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['ATT Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];
for(var i = 0; i Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
}
Ext.QuickTips.init();
var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company',
renderer: function (value, meta, record) {
if(value == 'Alcoa Inc' || value=="Boeing Co."){
meta.tdCls ='bgColor1';
}else{
meta.tdCls ='bgColor2';
}
return value;
}},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: Ext.getBody()
});
});
/script
/head
body
/body
/html
extjs怎么设置背景颜色
在extjs4.0中修改背景颜色和字体可以用style配置选项： 如下： Ext.define 'App.your_package.CustomToolbar', extend: 'Ext.toolbar.Toolbar' xtype: 'my-custom-toolbar' style: 'background-color: #112D41;font-family:"Times New Roman",
Extjs下的按钮的背景色和文字的颜色具体应该如何设置呢?
你要是调试下看下Ext的button是什么样，大概就知道怎么改了
Ext原来的样式不也挺好看的么
Ext.onReady(function () {
Ext.create('Ext.Button', {
text: 'Click me',
id:'mine',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
//背景色方式1，使用渐变色
Ext.getCmp('mine').el.setStyle('background-image','-webkit-linear-gradient(top,red,yellow 40%,yellow 30%,red)');
//背景色方式2
//Ext.getCmp('mine').btnEl.setStyle('background-color',"yellow");
//字体颜色
Ext.getCmp('mine').btnInnerEl.setStyle('color',"green");
})
