The problem I am facing is with the EXTJs grid.
I reconfigure the grid using the method grid.reconfigure(store,cols)
I have a custom renderer for my columns in the grid, in the renderer I call the function to set the width of the column accoridng to the content
The problem I am facing is that even though on the reconfigure method my renderer is called but my colWidth is not set in the first time. But on refreshing the grid it is set.
To give an example
someFunction:function(grid,store){
cols.push({
text: //something,
dataIndex : //something
renderer : renderer, //function call to renderer
width:100,
});
grid.reconfigure(store,cols);}
renderer:function(value){
colwidth(value);
return value; }
colwidth:function(value){
// compute content length
return 50;
}
Related
I have a generic Grid List Control. Which let me Bind the Item Source and ItemTemplate and it will generates the Column and Rows based on Number of Items or Based on how Users set the Rows and Columns. Its perfect until here. It supports all the generics I needed.
Now the Problem part:
I have a ContentView which will be used as Item Template for the Grid. This Template will be used for Multiple Data Types. I'm able to do it properly. Now I have one Data Type Where the First Cell should have RowSpan if it meets certain condition: The code below works perfect. It creates the RowSpan perfectly.
bool isYearBuilt = false;
bool isAny = false;
public FilterItemView()
{
InitializeComponent();
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
var context = BindingContext as PropertyFilterItem;
if (context == null)
return;
if(context.FilterType==PropertyFilterTypes.YearBuilt)
{
if(context.IsAny)
{
isYearBuilt = true; isAny = true;
}
}
}
protected override void OnParentSet()
{
base.OnParentSet();
GridList grid = this.Parent as GridList;
if (grid == null)
return;
if(isYearBuilt && isAny)
{
Grid.SetRowSpan(this, 2);
}
}
These are the Images; which will describe it more perfectly:
This is how it looks based on above code. We can see that it is creating RowSpan.
This is what I'm expecting to do.
The only problem is - While Setting RowSpan it is not refreshing the subsequent cells. Because, I'm applying the RowSpan in Runtime after the Grid and all the Cells are created. How can I refresh the Grid and other remaining cells to moved to their own cells?
Thank you for helping me.
Set the grid list's ItemsSource = null and set it back again to the item source you want.
Cause of the problem:
As you have said, While Setting RowSpan it is not refreshing the subsequent cells.
Solution:
After you have set rowspan using Grid.SetRowSpan(this, 2); you have to bind the datasource again.
Since I had my own Custom Grid List control. I implemented more Properties which let me know When I have to RowSpan for Child View in Grid and Adjust subsequent Child items. That was the only best way to deal with this problem rather than re-assigning the ItemSource property. Because, If we assign item source it will redraw all the items (including the rows and columns - not row/colspans). So we would still end up with same issue.
Solution: Added RowSpan logic in my Grid Control.
I have an itemRenderer which changes its graphics when it is clicked.
When the list gets scrolled again or another itemrenderer is clicked I want to restore the graphics.
But how can I notice inside an ItemRenderer that the list got scrolled?
Best regrads
Chris
You can use property change event of your list. In my case i am using same and it works perfect.
lstPost.scroller.viewport.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
protected function propertyChangeHandler( event : PropertyChangeEvent ) : void
{
if ( event.property == "verticalScrollPosition" )
{
//your code goes here
}
}
I have a flex spark list that is populated by a dynamically generated ArrayCollection (and is used in a recyclable component). If the Array Collection is less than 9 items, a checkbox item renderer is applied. If the ArrayCollection is greater than 8 items, I want to revert back to the default sparkList item Renderer. How do I remove the itemRenderer from the spark list?
if ((ac.length>0)&&(ac.length <=8))
{
//implement a renderer in the control for check boxes - this works!
this._s_g_ListBoxLong._list.itemRenderer = new ClassFactory(morris.renderers.Renderer_checkBoxes);
}
else if (ac.length >=9)
{
//apply the default item renderer for a spark list or remove the itemRenderer pointer
//????? HOW DO I DO THIS?
}
else
{
//do nothing
}
this._s_g_ListBoxLong._list.dataProvider = ac;
Try using DefaultItemRenderer.
The DefaultItemRenderer class defines the default item renderer for a List control. The default item renderer just draws the text associated with each item in the list.
this._s_g_ListBoxLong._list.itemRenderer = new ClassFactory(DefaultItemRenderer);
I have an item renderer that checks an external source for display information. If that information changes, I want to force all item renderer instances to check it.
What's the best way for force all the item renderers in a list or grid to either commitProperties or execute some other method?
I've read that resetting the
grid.itemRenderer property will make
them all initialize.
I've also received the suggestion to
iterate recursively through all the
grid's children and call invalidateProperties
on all the UIComponents I find.
Any thoughts? Alternatives?
Remember that in Flex Lists you're dealing with virtualization and itemRenderer recycling, so generally only the currently visible itemRenderers actually exist, and are therefore the ones that actually need updating.
The following works for Spark list-based controls:
for ( var i:int=0; i< sparkList.dataGroup.numElements; i++ )
{
var element:UIComponent = sparkList.dataGroup.getElementAt( i ) as UIComponent;
if ( element )
element.invalidateProperties();
else
trace("element " + i.toString() + " wasn't there");
}
If you've got 100 items, this will update the 10 visible ones and ignore the virtual rest.
If you're working with mx DataGrid, you might want to try a variant of this- but it doesn't use DataGroup / Spark virtualization so I don't have an answer for you off the top of my head.
P.S. I'm putting the finishing touches on a completely Spark-based DataGrid, I'll post the link when I'm done.
Datagroup has getItemIndicesInView() which will give you the indicies of all item renderers that are in view. Call getElementAt with those indicies.
I also usually extend ItemRenderer and add the following which will cause the item renderer's state to refresh.
public function invalidateSkinState():void
{
super.invalidateRendererState();
}
public function updateAllRenderer():void
{
if (!list.dataGroup)
return;
if (!list.dataGroup.dataProvider)
return;
for ( var index:int=0; index< list.dataGroup.numElements; index++ )
{
var item:Object = list.dataGroup.dataProvider.getItemAt(index);
var renderer:IVisualElement = list.dataGroup.getElementAt( index ) as IVisualElement;
if ( renderer )
list.updateRenderer( renderer, index, item );
}
}
works fine for me
Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.
So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?
It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:
The list:
<List>
<mouseDown>onListMouseDown(event)</mouseDown>
</Tree>
The mouse down handler:
private function onMouseDown( event : MouseEvent ) : void {
var list : List = List(event.currentTarget);
// the data of the clicked row, change the name of the class to your own
var item : MyDataType = MyDataType(list.selectedItem);
var source : DragSource = new DragSource();
// MyAwsomeDragFormat is the key that you will retrieve the data by in the
// component that handles the drop
source.addData(item, "MyAwsomeDragFormat");
// this is the component that will be shown as the drag proxy image
var dragView : UIComponent = new Image();
// set the source of the image to a bigger version here
dragView.source = getABiggerImage(item);
// get hold of the renderer of the clicked row, to use as the drag initiator
var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));
DragManager.doDrag(
rowRenderer,
source,
event,
dragView
);
}
That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.
It can be useful to add this to the beginning of the event handler:
if ( event.target is ScrollThumb || event.target is Button ) {
return;
}
Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.
I found a simpler answer here. That example extends a DataGrid control, but you can do the same with a List control. In my case, I use an image source instead of Class:
public class CustomDragList extends List {
[Bindable]
public var dragProxyImageSource:Object;
override protected function get dragImage():IUIComponent {
var image:Image = new Image();
image.width = 50;
image.height = 50;
image.source = dragProxyImageSource;
image.owner = this;
return image;
}
}
Then use that custom list like this:
<control:CustomDragList
allowMultipleSelection="true"
dragEnabled="true"
dragProxyImageSource="{someImageSource}"
dragStart="onDragStart(event)"/>
Where 'someImageSource' can be anything you'd normally use for an image source (embedded, linked, etc.)