I'm working on a moderated chat app. in flex. I'm using an
itemRenderer within a List to display a series of questions which the
"expert" can choose to reply. Now this itemRendered consists of:
"text" to display the question,
"textInput" to allow the expert to reply to it and a
"button" which is the send button.
Now the weird part is, say I type something into the first "textInput"
box to reply to the first question. when I scroll down, I see this
text which I entered in the first inputBox repeated in random rows
below too. Sometime when I scroll back up to the first item, the reply
is just not there... it's actually jumped from the box I typed it in
to some other box altogether! :S
Any help in this regard will be very helpful.
Cheers,
Abhishek
Thanks for showing interest... I'm actually using remoting (AMFPHP) to
populate the List control with data. But I think the problem will
occur if you use xml as the data source too. I'm copy pasting my code
here...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
creationComplete="initApplication()">
<mx:Component id="qRenderer" >
<mx:VBox verticalScrollPolicy="off" paddingBottom="5">
<mx:Text text="{data.question}" selectable="false" paddingLeft="5"
width="100%" />
<mx:HBox paddingLeft="10" width="100%" height="100%"
paddingBottom="5" >
<mx:TextArea id="answer" width="100%" height="100%"
wordWrap="true" />
<mx:Button label="Send" height="60" width="60"
click="parentDocument.sendAnswer(parentDocument.qList.selectedItem.id,
answer.text)" />
</mx:HBox>
</mx:VBox>
</mx:Component>
<mx:Panel width="100%" height="100%" layout="absolute" title="ChatApp
v0.1a [Expert Window]" >
<mx:HDividedBox left="10" top="10" bottom="10" right="10" >
<mx:Canvas width="100%" height="100%" label="Questions Pool"
cornerRadius="0" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:List id="qList" itemRenderer="{qRenderer}"
dataProvider="{questionData}"
left="10" top="10" right="10" bottom="10" rowHeight="140"
borderStyle="none" paddingRight="10" paddingBottom="5"
rollOverColor="#C3D9FF" selectionColor="#C3D9FF"
alternatingItemColors="[#E8EEF7, #FFFFFF]" >
</mx:List>
</mx:Canvas>
<mx:VBox height="100%" width="20%" verticalGap="10">
<mx:DataGrid x="0" y="0" editable="false" enabled="true"
width="100%" height="100%" borderStyle="solid" cornerRadius="0"
selectable="false">
<mx:columns>
<mx:DataGridColumn headerText="Active Users" dataField="nick"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HDividedBox>
<mx:ControlBar>
<mx:Button id="fetchQuestions" label="Fetch Questions" />
</mx:ControlBar>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectProxy;
import flash.net.Responder;
[Bindable]
public var questionData:ArrayCollection;
private var currentScrollPosition:Number;
public var stickToBottom:Number = 1;
public var gateway:RemotingConnection;
public function initApplication():void
{
gateway = new RemotingConnection("http://localhost/
amfphp/gateway.php");
getApprovedQuestions();
}
public function onResult(result:Array):void
{
for(var key:String in result) {
result[key] = new ObjectProxy(result[key]);
}
questionData = new ArrayCollection(result);
}
public function onResultDummy(result:Array):void {
trace (result);
}
public function onFault(fault:String):void
{
trace (fault);
}
public function getApprovedQuestions():void
{
gateway.call("getChatData.getApprovedQuestions", new
Responder(onResult, onFault));
}
public function sendAnswer(id:Number, answer:String):void
{
trace (qList.selectedIndex + " | " + id + " | " +
answer);
gateway.call("getChatData.sendAnswer", new
Responder(onResultDummy, onFault), id, answer);
questionData.removeItemAt(qList.selectedIndex);
}
]]>
</mx:Script>
</mx:Application>
As you can see i've defined my "itemRenderer" as a component, and used
it within the "list" control. The data populates fine and i'm able to
reply to the question... but after I type my answer and scroll down,
the text seems to jump randomly from one input box to another. Infact
I was facing the same problem earlier with radio buttons... the radio
buttons would randomly get enabled/disabled while scrolling up and
down the list.
I might be putting this app up on a test server today, if I am able to
do so i'll pass on the link so you can see it happen for yourself...
Cheers,
Abhishek
> I'm working on a moderated chat app. in flex. I'm using an
> itemRenderer within a List to display a series of questions which the
> "expert" can choose to reply. Now this itemRendered consists of:
>
> "text" to display the question,
> "textInput" to allow the expert to reply to it and a
> "button" which is the send button.
>
> Now the weird part is, say I type something into the first "textInput"
> box to reply to the first question. when I scroll down, I see this
> text which I entered in the first inputBox repeated in random rows
> below too.
The reason that happens is because item renderers are recycled. i.e.
the first item renderer is reused for the last row (or any other row)
when you scroll up and down. What you want is to commit the data to
the collection when the focus moves out of the renderer. Incidentally
item *editors* work just that way, so you want to explore using an
item editor and/or the rendererIsEditor property.
The property rendererIsEditor works for the data, but how about the
scroll position?
I found when using TextArea for itemrenderer, It's hard to keep scroll
position of each item.
On Jul 3, 11:48 pm, "kanu kukreja" <kanukukr...@gmail.com> wrote:
> Its very useful thing u told us..
> can u pls explain this with some example...
>
> thanx in advance
>
> On 7/2/07, smallville <pengfei....@gmail.com> wrote:
>
>
>
>
>
>
>
> > > The reason that happens is because item renderers are recycled. i.e.
> > > the first item renderer is reused for the last row (or any other row)
> > > when you scroll up and down. What you want is to commit the data to
> > > the collection when the focus moves out of the renderer. Incidentally
> > > item *editors* work just that way, so you want to explore using an
> > > item editor and/or the rendererIsEditor property.
>
> > The property rendererIsEditor works for the data, but how about the
> > scroll position?
> > I found when using TextArea for itemrenderer, It's hard to keep scroll
> > position of each item.
>
> --
> Regards
> Kanu Kukrejahttp://kanukukreja.blogspot.com/- Hide quoted text -
>
> - Show quoted text -
If you
1. scroll the datagrid to last page,
2. scroll the 'Description' TextAreas of last three rows to bottom
line,
3. scroll the datagrid up and down,
You'll find the random descriptions are scrolled to bottom line.
Any suggestion is appreciated.
Thanks,
---------------------------------------------------------------------------------------------------------
<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\MainAppEditable.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="600" width="800">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{ViewName:'All Funds - Failed Trades', ViewType:'Trades',
Description:'Description 1', Author:'George Abbot', subscribed:false},
{ViewName:'All Funds - Top Holdings', ViewType:'Holdings',
Description:'Description 2', Author:'Antonio Cordes',
subscribed:false },
{ViewName:'Asia - Trade Issues', ViewType:'Trades',
Description:'Description 3', Author:'Jennifer Ayers',
subscribed:true },
{ViewName:'Exposure - Governance', ViewType:'Holdings',
Description:'Description 4', Author:'Andrea Cook', subscribed:false },
{ViewName:'Lot Level - Drilldown', ViewType:'Holdings',
Description:'Another Description', Author:'Antonio Cordes',
subscribed:true },
{ViewName:'All Funds - Failed Trades', ViewType:'Trades',
Description:'Description 4.', Author:'George Abbot',
subscribed:false },
{ViewName:'All Funds - Top Holdings', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:true },
{ViewName:'Asia - Trade Issues', ViewType:'Trades', Description:'Some
descriptive text about this public view goes here. This would be
modifiable as necessary. Some descriptive text about this public view
goes here. This would be modifiable as necessary.', Author:'Jennifer
Ayers', subscribed:false },
{ViewName:'Exposure - Governance', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Andrea Cook', subscribed:false },
{ViewName:'Lot Level - Drilldown', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:false },
{ViewName:'All Funds - Top Holdings', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:true },
{ViewName:'Asia - Trade Issues', ViewType:'Trades', Description:'Some
descriptive text about this public view goes here. This would be
modifiable as necessary. Some descriptive text about this public view
goes here. This would be modifiable as necessary.', Author:'Jennifer
Ayers', subscribed:false },
{ViewName:'Exposure - Governance', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Andrea Cook', subscribed:false },
{ViewName:'Lot Level - Drilldown', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:false },
{ViewName:'All Funds - Top Holdings', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:true },
{ViewName:'Asia - Trade Issues', ViewType:'Trades', Description:'Some
descriptive text about this public view goes here. This would be
modifiable as necessary. Some descriptive text about this public view
goes here. This would be modifiable as necessary.', Author:'Jennifer
Ayers', subscribed:false },
{ViewName:'Exposure - Governance', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Andrea Cook', subscribed:false },
{ViewName:'Lot Level - Drilldown', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:false },
{ViewName:'All Funds - Top Holdings', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:true },
{ViewName:'Asia - Trade Issues', ViewType:'Trades', Description:'Some
descriptive text about this public view goes here. This would be
modifiable as necessary. Some descriptive text about this public view
goes here. This would be modifiable as necessary.', Author:'Jennifer
Ayers', subscribed:false },
{ViewName:'Exposure - Governance', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Andrea Cook', subscribed:false },
{ViewName:'Lot Level - Drilldown', ViewType:'Holdings',
Description:'Some descriptive text about this public view goes here.
This would be modifiable as necessary. Some descriptive text about
this public view goes here. This would be modifiable as necessary.',
Author:'Antonio Cordes', subscribed:false }
]);
]]>
</mx:Script>
<mx:DataGrid id="myDG"
width="100%" height="100%"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="ViewName"
headerText="View Name"/>
<mx:DataGridColumn dataField="ViewType" headerText="View Type"
width="75"/>
<mx:DataGridColumn dataField="Description"
headerText="Description" rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:TextArea verticalScrollPolicy="off"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="Author" headerText="Author"
width="85"/>
<mx:DataGridColumn headerText="Subscribe?" dataField="subscribed"
width="70">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalAlign="top" horizontalAlign="center"
click="data.subscribed = !data.subscribed; checkBox.selected =
data.subscribed">
<mx:CheckBox id="checkBox" selected="{data['subscribed']}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
On Jul 4, 2:48 am, "kanu kukreja" <kanukukr...@gmail.com> wrote:
> Its very useful thing u told us..
> can u pls explain this with some example...
>
> thanx in advance
>
1. Scroll to the last row of the datagrid.
2. Scroll 'Description' TextAreas of last three rows to the bottom.
3. Scroll the datagrid up and down
Then you can see random TextAreas are scrolled to the bottom.
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="ViewName" headerText="View Name"
editable="false"/>
<mx:DataGridColumn dataField="ViewType" headerText="View Type"
width="75" editable="false"/>
<mx:DataGridColumn dataField="Description"
headerText="Description" editable="true" wordWrap="true"/>
<mx:DataGridColumn dataField="Author" headerText="Author"
width="85" editable="false"/>
<mx:DataGridColumn headerText="Subscribe?" dataField="subscribed"
width="70" editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalAlign="top" horizontalAlign="center"
click="data.subscribed = !data.subscribed; checkBox.selected =
data.subscribed">
<mx:CheckBox id="checkBox" selected="{data['subscribed']}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
> > Kanu Kukrejahttp://kanukukreja.blogspot.com/-Hide quoted text -
1. Scroll to the last row of the datagrid.
2. Scroll 'Description' TextAreas of last three rows to the bottom.
3. Scroll the datagrid up and down
Then you can see random TextAreas are scrolled to the bottom.
Any idea is appreciated.
In last two versions of code, I did use the editable properties for
both DataGrid and DataGridColumn. But it didn't work either in my box.
What's your's Flex SDK version? Mine is 2.0.1
On Jul 4, 8:07 pm, "imtiyaz basha" <imtiyaz...@gmail.com> wrote:
> Hi,
>
> Sorry i missed one more statement...
> Add editable="false" to all datagrid columns except description.
> Otherwise by default complete datagrid will have editable property enabled.
>
> Thanks and Regards,
> Imtiyaz.m.s
>
> ...
>
> read more »
What's your's Flex SDK version? Mine is 2.0.1
Regards & thanks,
On Jul 6, 1:17 pm, karan <karan.pra...@gmail.com> wrote:
> I too faced a similar kind of problem. Till now i have no clue why its
> happening.
> My guess is when you are using itemRender for your DataGridColumn, the
> DataGrid breaks. In a normal case it doesn't break.
>
> On 7/6/07, kanu kukreja <kanukukr...@gmail.com> wrote:
>
>
>
>
>
> > Sam the example you have given here is working fine at my end.
> > I know about that problem,i saw that at so many places, but in this
> > example i'm not able to view that...
> > Do you have any other example so that i can check that with the solution
> > provided by Imtiyaz.
>
What's your's Flex SDK version? Mine is 2.0.1
Regards & thanks,
On Jul 6, 1:17 pm, karan <karan.pra...@gmail.com> wrote:
> I too faced a similar kind of problem. Till now i have no clue why its
> happening.
> My guess is when you are using itemRender for your DataGridColumn, the
> DataGrid breaks. In a normal case it doesn't break.
>
> On 7/6/07, kanu kukreja <kanukukr...@gmail.com> wrote:
>
>
>
>
>
> > Sam the example you have given here is working fine at my end.
> > I know about that problem,i saw that at so many places, but in this
> > example i'm not able to view that...
> > Do you have any other example so that i can check that with the solution
> > provided by Imtiyaz.
>
Regards,
> here.Thiswould be modifiable as necessary. Some descriptive text
> On 7/9/07, karan <karan.pra...@gmail.com> wrote:
>
>
>
> > I faced this bug in 2.0.1.. i tried in flex 3 too...its not yet rectified
>
> > On 7/9/07, imtiyaz basha <imtiyaz...@gmail.com > wrote:
>
> > > mee too working on same one.
>
> > > - imtiyaz.m.s
>
> ...
>
> read more »