treeviewattachedtest.xml

ajax 框价．是个好工具．javascript 矿家．可以用在任何平台．

<?xml version="1.0"?>

<Application autoNameMapping="true">
	<Window caption="Tree View Test" width="600" height="400">
		<VBox left="20" right="20" top="20" bottom="20">
			<TreeView id="g" VBox.flex="1">
				<TreeView.viewManager>
					<TreeViewViewManager showGridLines="false"
										 showRowHeaders="false"/>
				</TreeView.viewManager>
			</TreeView>
			<HBox align="center">
				<Label margin="3" text="Label:"/>
				<Spinner margin="3" HBox.flex="1"/>
			</HBox>
		</VBox>
	</Window>
	<Resources>
		<Script><![CDATA[

function TreeViewAttachedTest()
{
	var win = application.getWindow();

	// build data;
	var rows = 100;
	var cols = 5;
	var data = new Array( rows );
	for ( var y = 0; y < rows; y++ )
	{
		data[y] = new Array( cols );
		for ( var x = 0; x < cols; x++ )
			data[y][x] = y + ", " + x;
	}

	//g.getSelectionModel().setSelectionMode( "cell" );

	var SPECIAL_COLUMN = 2;
	var cellData = {};

	var dm = new BiGridDataModel( data );
	dm.getCellText = function ( x, y )
	{
		var key = x + "_" + y;
		if ( key in cellData )
			return cellData[key];
		if ( x == SPECIAL_COLUMN )
			return "";
		return y +", " + x;
	};

	dm.setCellText = function ( x, y, v )
	{
		cellData[x + "_" + y] = v;
	};

	dm.getRowStyle = function ( y )
	{
		return (y % 2 ? "" : "background-color:#edf2f9") + ";color:navy;"
	};

	g.setDataModel( dm );

	///////////////////////////////////////////////////
	// Attached component model
	var am = new BiAttachedComponentModel;
	am.getHasAttachedComponent = function ( x, y )
	{
		return x == SPECIAL_COLUMN;
	};

	var cs = [];
	am.getAttachedComponent = function ( x, y )
	{
		if ( cs[y] )
			return cs[y];

		var c = new StarRatings;
		return cs[y] = c;
	};

	g.setAttachedComponentModel( am );

	///////////////////////////////////////////////////
	// Inline editing model
	var iem = new BiInlineEditModel;

	iem.addEventListener( "beforeshow", function ( e )
	{
		iem.setValue( dm.getCellText( iem.getColumn(), iem.getRow() ) );
	} );
	iem.addEventListener( "change", function ( e )
	{
		var v = iem.getValue();
		dm.setCellText( iem.getColumn(), iem.getRow(), v );
	} );

	iem.getEditType = function ( x, y )
	{
		//return BiInlineEditModel.EDIT_TYPE_STRING;
		//return BiInlineEditModel.EDIT_TYPE_NUMBER;
		switch ( y % 3 )
		{
			case 0:
				return BiInlineEditModel.EDIT_TYPE_STRING;
			case 1:
				return BiInlineEditModel.EDIT_TYPE_NUMBER;
			case 2:
				return BiInlineEditModel.EDIT_TYPE_ENUM;
		}

	};
	iem.getEditOptions = function ( x, y )
	{
		switch ( y % 3 )
		{
			case 0:
				return {};
			case 1:
				return {minimum: 0, maximum: 1000};
			case 2:
				return [
					{userValue: 1, text: "One"},
					{userValue: 2, text: "Two"},
					{userValue: 3, text: "Three"}
				];
		}
	};

	iem.getCanEdit = function ( x, y )
	{
		return x != SPECIAL_COLUMN;
	};
	g.setInlineEditModel( iem );

	g.update();
}

TreeViewAttachedTest.main = function ()
{
	new TreeViewAttachedTest;
};


/**
 * This component is used to show rating between 1 and 5 (as well as unknown).
 */
function StarRatings()
{
	BiComponent.call( this );
	var img = this._image = new BiImage;
	img.setLocation(0, 2);
	img.setSize(56, 12);
	this.add( img );
	this._updateImage();

	this.addEventListener( "mousemove", this._onMouseMove );
	this.addEventListener( "mouseout", this._onMouseOut );
	this.addEventListener( "click", this._onClick );
}

_p = StarRatings.prototype = new BiComponent;
_p._className = "StarRatings";


_p._value = null;
/**
 * The value of the rating, 1 - 5 as well as "unknown"
 * @type String/Number
 */
StarRatings.addProperty( "value", Function.READ );

_p.setValue = function ( v )
{
	v = Math.round( v );
	if ( isNaN(v) || v < 1 || v >5 )
		v = null;
	this._value = v;
	this._updateImage( v );
};

_p._updateImage = function ( v )
{
	v = Math.round( v );
	if ( isNaN(v) || v < 1 || v >5 )
		v = "unknown";
	this._image.setUri( "images/star." + v + ".gif" );
};

_p._onMouseMove = function ( e )
{
	var r = Math.floor( (e.getOffsetX() - this._image.getLeft()) / this._image.getWidth() * 5 ) + 1;
	this._updateImage( r );
};

_p._onMouseOut = function ( e )
{
	this._updateImage( this.getValue() );
};

_p._onClick = function ( e )
{
	var r = Math.floor( (e.getOffsetX() - this._image.getLeft()) / this._image.getWidth() * 5 ) + 1;
	this.setValue( r );
};

		]]></Script>
	</Resources>
</Application>