`
it_liuyong
  • 浏览: 100488 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义column renderer

    博客分类:
  • flex
 
阅读更多
<?xml version="1.0" encoding="utf-8"?>

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/ProgrammaticSkinning/index.html"
>
<mx:VBox
borderSkin="CustomBorder"
backgroundColor="0xCCCC99"   
backgroundAlpha="0.8"
cornerRadius="14"
paddingLeft="20" paddingTop="20"   
paddingRight="20" paddingBottom="20"

>
<mx:Text text="The VBox has a {&apos;\r&apos;}programmatic skin."/>
</mx:VBox>

</mx:Application>


package  itemRender
{
import flash.display.Graphics;
import flash.geom.Rectangle;

import mx.charts.ChartItem;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.charts.series.ColumnSeries;
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
import mx.controls.Text;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
import mx.graphics.IFill;
import mx.graphics.IStroke;
import mx.graphics.SolidColor;
import mx.styles.StyleManager;
import mx.utils.ColorUtil;



public class MyCol extends UIComponent implements IDataRenderer 

private var _data:Object;
private var l:Text ;

[Inspectable(environment="none")]

/**
*  The chartItem that this itemRenderer is displaying.
*  This value is assigned by the owning series
*/
public function get data():Object
{
return _data;
}

protected function get showOtherLabel():Boolean{
return true;
}

private function getMMvalue(arr:ArrayCollection,yField:String):Array{
var max:Number=Number.NEGATIVE_INFINITY;
var min:Number=Number.POSITIVE_INFINITY;
for each(var obj:Object in arr){
if(!isNaN(Number(obj[yField]))){
max = Math.max(max,Number(obj[yField]));
min = Math.min(min,Number(obj[yField]));
}
}
return [max,min];
}

protected function get colors():Array{
return ["#008654","#d80000","#B600CC"];
}

private function getColor(max:Boolean=false,min:Boolean=false):String{
var c:String= colors[0];
if(max)
c= colors[1];
else if(min)
c= colors[2];
return c;

}
/**
*  @private
*/
public function set data(value:Object):void
{
if (_data == value)
return;

_data = value;
if(value is ColumnSeriesItem){
if(l&&this.contains(l))
this.removeChild(l);
var csi:ColumnSeriesItem = ColumnSeriesItem(_data);
var cs:ColumnSeries = ColumnSeries(csi.element);
var arr:ArrayCollection = cs.dataProvider as ArrayCollection;
var m:Array=getMMvalue(arr,cs.yField);
var max:Boolean = Number(csi.yValue)==m[0];
var min:Boolean = Number(csi.yValue)==m[1];
if(max||min||(arr.length<13&&showOtherLabel)){
l= new Text();
if(max||min)
l.setStyle("fontWeight","bold");
this.addChild(l);
if((value as ColumnSeriesItem).yValue)
l.text= (value as ColumnSeriesItem).yValue.toString();//data label 标签会截掉最后一位,临时处理
l.setStyle("color",getColor(max,min));
l.setStyle("fontSize","14");
}
}
}

//--------------------------------------------------------------------------
//
//  Overridden methods
//
//--------------------------------------------------------------------------

/**
*  @private
*/
override protected function updateDisplayList(unscaledWidth:Number,
  unscaledHeight:Number):void
{
var fill:IFill;
var state:String = "";

if(_data is ChartItem && _data.hasOwnProperty('fill'))
{
state = _data.currentState;
fill = _data.fill;
}
else
fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));

var color:uint;
var adjustedRadius:Number = 0;

switch(state)
{
case ChartItem.FOCUSED:
case ChartItem.ROLLOVER:
if(StyleManager.isValidStyleValue(getStyle('itemRollOverColor')))
color = getStyle('itemRollOverColor');
else
color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-20);
fill = new SolidColor(color);
adjustedRadius = getStyle('adjustedRadius');
if(!adjustedRadius)
adjustedRadius = 0;
break;
case ChartItem.DISABLED:
if(StyleManager.isValidStyleValue(getStyle('itemDisabledColor')))
color = getStyle('itemDisabledColor');
else
color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),20);
fill = new SolidColor(GraphicsUtilities.colorFromFill(color));
break;
case ChartItem.FOCUSEDSELECTED:
case ChartItem.SELECTED:
if(StyleManager.isValidStyleValue(getStyle('itemSelectionColor')))
color = getStyle('itemSelectionColor');
else
color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-30);
fill = new SolidColor(color);
adjustedRadius = getStyle('adjustedRadius');
if(!adjustedRadius)
adjustedRadius = 0;
break;
}

var stroke:IStroke = getStyle("stroke");

var w:Number = stroke ? stroke.weight / 2 : 0;

var rc:Rectangle = new Rectangle(w - adjustedRadius, w - adjustedRadius, width - 2 * w + adjustedRadius * 2, height - 2 * w + adjustedRadius * 2);

var g:Graphics = graphics;
g.clear();
g.moveTo(rc.left,rc.top);
if (stroke)
stroke.apply(g,rc,null);
if (fill)
fill.begin(g,rc,null);

//圆角矩形
g.drawRoundRect(w - adjustedRadius,
w - adjustedRadius, width - 2 * w + adjustedRadius * 2,
height - 2 * w + adjustedRadius * 2,15);

// g.lineTo(rc.right,rc.top);
// g.lineTo(rc.right,rc.bottom);
// g.lineTo(rc.left,rc.bottom);
// g.lineTo(rc.left,rc.top);
if (fill)
fill.end(g);
if(l){
l.setActualSize(l.textWidth+25,l.textHeight);
l.move(-9,0-l.height);
}
}


}
分享到:
评论

相关推荐

    TableRenderer_Renderer_Table_java_netbeans_

    本主题主要关注如何在Java中使用NetBeans来实现表格(JTable)的自定义渲染,即"Table Renderer"。渲染器是Java Swing中一个重要的概念,它允许我们控制组件的显示方式,使其符合应用程序的需求。 在Java Swing中,...

    Flex dataGrid 自定义显示列

    对于更复杂的自定义,我们可以使用`renderer`属性来指定自定义渲染器。渲染器是决定数据如何在界面上显示的关键组件。通过创建自定义的MX:ListBaseItemRenderer或Spark:GridItemRenderer子类,我们可以完全控制...

    给DataGrid自定义Header功能

    - 定义一个新的React组件作为`headerRenderer`,这个组件需要接收一些关键参数,如`columnDef`(列定义),`value`(列的默认值),`columnIndex`,`width`等。 - 在组件内部,你可以自由地设计和实现Header的HTML...

    jtable中放多个Button.rar

    在Java的Swing库中,...记住,自定义Renderer是Swing中增强JTable功能的一种强大方式,允许你在单元格内放置任何类型的组件,不仅仅是按钮。熟练掌握这一技巧,能让你的Java Swing应用具有更高的定制性和用户体验。

    *Renderer implements TableCellRenderer

    标题“*Renderer implements TableCellRenderer”表明我们正在讨论一个自定义的渲染器,该渲染器实现了`TableCellRenderer` 接口以控制表格中每个单元格的外观和行为。 `TableCellRenderer` 是 Swing 的核心组件之...

    Flex DataGird Add RadioButton

    3. **自定义列渲染器**:为了在DataGrid的每一行中显示RadioButton,你需要创建一个自定义的Column Renderer。在Renderer类中,你需要实例化一个RadioButton,并将其值绑定到数据项的特定属性。 4. **设置事件监听...

    extjs 如何给column 加上提示

    在EXTJS的GridPanel中,我们可以通过定义Column的`renderer`函数来实现这一功能。 `renderer`函数是EXTJS中用于自定义数据显示的回调函数,它接受多个参数: 1. `value`:当前单元格的数据值。 2. `metaData`:一...

    FLEX 修改表格的单元格背景色

    column.renderer = MyCustomCellRenderer; table.columns.add(column); ``` 5. **优化性能** 对于大量数据的表格,避免在每个单元格上进行复杂的计算或多次重绘。可以预先计算好颜色并存储在数据对象中,或者...

    Grid(6)[自定义DataGrid-强制显示分列线(在不显示列头时)]

    这里的“Grid(6)”可能指的是该系列教程的第六部分,而“强制显示分列线”意味着我们将学习如何在DataGrid中即使不显示列头(column headers)的情况下,也能保持清晰的列分隔线,以增强表格的可读性。 【描述解析...

    ExtJS4 Grid改变单元格背景颜色及Column render学习

    `renderer`函数是一个非常强大的特性,它允许我们在数据显示之前对其进行自定义处理,包括格式化数据、添加样式等。 首先,我们来看一下提供的代码示例。在这个例子中,我们创建了一个简单的Grid,显示了用户的名字...

    Ext GridPanel 中实现加链接操作

    ### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行...通过自定义 `renderer` 函数,我们可以轻松地为单元格添加交互元素。此外,还讨论了一些扩展功能和注意事项,希望对开发者有所帮助。

    ext超酷的grid中放图片(ext3.2.1)

    - 要在Grid中显示图片,我们需要创建一个自定义的列类型,这通常通过扩展EXT JS的Column类来实现。 - 自定义列需要重写`renderer`函数,这个函数负责将数据转化为可渲染的HTML。 3. **图片数据的处理** - 图片...

    vxetablevuetable一个功能更加强大的Vue表格组件

    VxeTable不仅具备基本的表格操作,如排序、筛选、分页,还支持复杂的表格场景,如自定义列模板、树形数据、富文本编辑等。 在Vue.js框架中,VxeTable作为一个UI组件库,能够很好地融入到Vue项目中。Vue.js是一个轻...

    flex Datagrid checkbox全选

    column.renderer = CheckBoxHeaderRenderer; datagrid.addColumn(column); ``` 对于行中的checkbox,你可以在数据源中定义对应的字段,Flex会自动使用默认的`CheckBoxItemRenderer`。 总结起来,实现Flex Datagrid...

    flash中datagrid用法及外部类的引入.rar

    4. **自定义列渲染**:如果需要对数据显示进行特殊处理,可以通过设置GridColumn的renderer属性来实现自定义渲染。这通常涉及创建一个新的UIComponent子类,并实现数据到可视元素的转换。 三、外部类的引入与使用 ...

    netbeans jtable 复杂表头的实现方法

    public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) { // 实现复杂的渲染逻辑 } }; header.setDefaultRenderer...

    Extjs Grid 中的 ToolTip效果

    - 对于Grid的列,我们可以使用`Ext.grid.column.Column`的`tooltip`配置项,或者使用`renderer`函数来动态生成Tooltip内容。 2. **配置列的Tooltip**: - 在定义Grid的列模型时,可以直接在列配置对象中设置`...

    Extjs 实现多行合并(rowspan)效果

    要实现行合并,我们需要对GridPanel的renderer函数进行定制,以及可能需要调整其store和column模型。 1. **renderer函数**:这是关键的部分,因为我们需要在渲染每一行时决定哪些单元格应该合并。renderer函数接收...

    修改grid行或列颜色

    2. **列颜色修改**:通过 `ColumnModel` 的 `renderer` 属性指定自定义渲染器,可以在单元格级别上设置背景颜色。 3. **灵活性与可扩展性**:这种方式不仅可以让Grid更具可读性,而且易于维护和扩展。比如可以通过...

    ext grid 合并行

    2. **自定义Renderer**:首先,我们需要创建一个自定义的单元格渲染器,这个渲染器将在合并行时负责绘制合并后的单元格。渲染器可以通过`renderer`配置项在列模型(ColumnModel)中定义。 3. **计算合并范围**:在...

Global site tag (gtag.js) - Google Analytics