PDA

View Full Version : Ext.ux.grid.RowEditor && font of editing row



Ex_Soft
14 Feb 2011, 12:01 PM
I try to use Ext.ux.grid.RowEditor (http://dev.sencha.com/deploy/dev/examples/grid/row-editor.html). But font of editing row is more large than grid's font. Where is this font set?

tobiu
14 Feb 2011, 1:24 PM
use firebug, inspect the element and see what css-class it has. then change it.
i did it that way but can't remember the name anymore.


best regards
tobiu

Ex_Soft
15 Feb 2011, 2:32 AM
use firebug, inspect the element and see what css-class it has


<div name="ext-comp-1066" id="ext-comp-1066" class=" x-form-display-field x-box-item" style="width: 79px; left: 1px; top: 0px;">3155499</div>

then change it
x-form-display-field && x-box-item is from ext-all.css and I don't want to edit it. I try to add


.x-form-display-field .x-box-item
{
font-size: 11px ! important;
}
but this doesn't work.

P.S. BTW, Computed shows font-size: 16px...

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>&laquo;Test RowEditor&raquo;</title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/examples/ux/css/RowEditor.css"/>
<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>

<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/examples/ux/RowEditor.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL="http://dev.sencha.com/deploy/dev/resources/images/default/s.gif";

Ext.onReady(function() {
Ext.QuickTips.init();

var
rec = Ext.data.Record.create([
{ name: "name", mapping: 1 }
]),
reader = new Ext.data.ArrayReader({
idIndex: 0
}, rec),
store = new Ext.data.ArrayStore({
autoDestroy: true,
idIndex: 0,
fields: [
{ name: "id", type: "int" },
"name"
],
reader: reader
}),
data=[
[ 1, "Record# 1" ],
[ 2, "Record# 2" ],
[ 3, "Record# 3" ],
[ 4, "Record# 4" ]
],
vp = new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
items: [{
region: "center",
xtype: "grid",
store: store,
cm: new Ext.grid.ColumnModel({
columns: [
{ dataIndex: "id", header: "id", editor: new Ext.form.NumberField({}) },
{ id: "ColName", dataIndex: "name", header: "name" }
]
}),
autoExpandColumn: "ColName",
plugins: [new Ext.ux.grid.RowEditor()]
}]
});

store.loadData(data);
});
</script>
</head>
<body>
</body>
</html>

tobiu
15 Feb 2011, 4:52 AM
.x-form-display-field .x-box-item
{
font-size: 11px ! important;
}


can't work, because box item is not a child-node of display-field.
it's one node with 2 classes.

try



.x-box-item
{
font-size: 11px ! important;
}

Ex_Soft
15 Feb 2011, 5:41 AM
.x-form-display-field.x-box-item
{
font-size: 11px;
}

works!!!