PDA

View Full Version : How do I create a custom ListItem and use it in a List?



paul.morrissey
3 Oct 2017, 3:32 AM
I have created a class that extends ListItem...


import React, { Component } from 'react';
import { Container, ListItem, TextField } from '@extjs/ext-react';


export default class VirtualReceiptListItem extends ListItem {

constructor(props) {
super(props);
this.state = {};
}

render() {
return (
<Container>
<TextField
readOnly={true}
value={"VirtualReceiptListItem"}
/>
</Container>
)
}
}


...and I am trying to use it in a List...



render() {
return (
<Container
flex={1}
layout="fit"
border="false"
style={{
background: "#D3D3D3",
border: "1px solid black"
}}
>
<List
margin={5}
store={this.store}
onSelect={this.onSelect}
itemConfig={{
xtype: 'virtualreceiptlistitem'
}}
plugins={[{
type: 'listswiper',
defaults: {
ui: 'action'
},
left: [{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Product Discount',
commit: this.onProductDiscount
},
{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Price Override',
commit: this.onPriceOverride
},
{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Change Quantity',
commit: this.onChangeQuantity
}],
right: [{
iconCls: 'x-fa fa-trash',
ui: 'alt decline',
text: 'Void',
precommit: this.onVoidItem,
commit: this.onConfirmVoidItem,
revert: this.onUndoVoidItem,
undoable: true
}]
}]}
/>
</Container>
)
}


...I am getting this error...

[HMR] Error: [Ext.createByAlias] Unrecognized alias: widget.virtualreceiptlistitem
at Ext.Inventory.instantiateByAlias (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:10695:13)
at Object.factory (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:8282:27)
at constructor.factoryItem (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:39329:16)
at constructor.add (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:39359:17)
at constructor.addDataItem (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:52622:22)
at constructor.callParent (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:9662:24)
at constructor.addDataItem (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:53286:12)
at constructor.acquireItem (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:52606:15)
at constructor.updateItemCount (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:52818:10)
at constructor.setter [as setItemCount] (http://localhost:8080/ext-react/ext.js?457abd3043e7e8b889be:8812:25)

...how do I specify an alias for my custom ListITem class?

paul.morrissey
4 Oct 2017, 3:11 PM
making some progress (see tpl for option1 (works) and option 2 (does not work))...


tpl= data => (
// Option 1: list items render properly
// <Container flex={1}>
// <Button
// text={JSON.stringify(data)}
// />
// </Container>


// Option 2: list items do not render properly
// <VirtualReceiptListItem data={data} />
)


render() {
return (
<Container
flex={1}
layout="fit"
border="false"
style={{
background: "#D3D3D3",
border: "1px solid black"
}}
>
<List
margin={5}
store={this.store}
onSelect={this.onSelect}
// itemConfig={{
// xtype: 'virtualreceiptlistitem'
// }}
itemTpl={ this.tpl }
plugins={[{
type: 'listswiper',
defaults: {
ui: 'action'
},
left: [{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Product Discount',
commit: this.onProductDiscount
},
{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Price Override',
commit: this.onPriceOverride
},
{
iconCls: 'x-fa fa-money',
ui: 'alt confirm',
text: 'Change Quantity',
commit: this.onChangeQuantity
}],
right: [{
iconCls: 'x-fa fa-trash',
ui: 'alt decline',
text: 'Void',
precommit: this.onVoidItem,
commit: this.onConfirmVoidItem,
revert: this.onUndoVoidItem,
undoable: true
}]
}]}
/>
</Container>
)
}




import React, { Component } from 'react';
import { Container, ListItem, Button } from '@extjs/ext-react';


export default class VirtualReceiptListItem extends ListItem {


constructor(props) {
super(props);
this.data = props.props.data;
this.state = {};
}


render() {
return (
<Container flex={1}>
<Button
text={JSON.stringify(data)}
/>
</Container>
)
}
}



For the working option 1, the Virtual DOM does not list the "tpl" objects under the List. See attached screenshot.

Animal
5 Oct 2017, 10:54 PM
You just need to define virtualreceiptlistitem

It's an xtype which is a shorthand reference to a class. When you define a class using Ext,define(), you need to configure xtype; No idea how to do that with native classes. That would need some kind of programmatic registration with the xtype-> class registry

paul.morrissey
6 Oct 2017, 5:04 AM
You just need to define virtualreceiptlistitem

It's an xtype which is a shorthand reference to a class. When you define a class using Ext,define(), you need to configure xtype; No idea how to do that with native classes. That would need some kind of programmatic registration with the xtype-> class registry

Thanks for the reply Animal.
I am trying to build out an ExtReact POC app and a custom ListItem is part of my solution. I need someone from the ExtReact team tell me how I can specify an xtype / alias for my custom ListItem class if an xtype is needed by itemConfig.