包含extjs背景色的詞條

本文目錄一覽：

• 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”);

})