Results 1 to 4 of 4

Thread: How do I create a custom ListItem and use it in a List?

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default How do I create a custom ListItem and use it in a List?

    I have created a class that extends ListItem...

    Code:
    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...

    Code:
        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....889be:10695:13)
    at Object.factory (http://localhost:8080/ext-react/ext....b889be:8282:27)
    at constructor.factoryItem (http://localhost:8080/ext-react/ext....889be:39329:16)
    at constructor.add (http://localhost:8080/ext-react/ext....889be:39359:17)
    at constructor.addDataItem (http://localhost:8080/ext-react/ext....889be:52622:22)
    at constructor.callParent (http://localhost:8080/ext-react/ext....b889be:9662:24)
    at constructor.addDataItem (http://localhost:8080/ext-react/ext....889be:53286:12)
    at constructor.acquireItem (http://localhost:8080/ext-react/ext....889be:52606:15)
    at constructor.updateItemCount (http://localhost:8080/ext-react/ext....889be:52818:10)
    at constructor.setter [as setItemCount] (http://localhost:8080/ext-react/ext....b889be:8812:25)

    ...how do I specify an alias for my custom ListITem class?
    Last edited by paul.morrissey; 3 Oct 2017 at 3:44 AM. Reason: Added error message

  2. #2

    Default

    making some progress (see tpl for option1 (works) and option 2 (does not work))...

    Code:
        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>
            )
        }
    Code:
    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.
    Attached Images Attached Images

  3. #3
    Sencha - Community Support Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,740
    Vote Rating
    79
      0  

    Default

    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
    Longtime Sencha engineer. Now surplus to requirements apparently...

  4. #4

    Default

    Quote Originally Posted by Animal View Post
    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.

Similar Threads

  1. [FIXED] Custom ListItem classes are broken in 6.5
    By bobringer in forum Ext 6: Bugs
    Replies: 1
    Last Post: 21 May 2017, 3:07 PM
  2. List with useComponents; ListItem.updateRecord not called
    By arael78 in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 14 Sep 2015, 11:36 AM
  3. ListItem - How to get data record for list item?
    By minamu1 in forum Sencha Touch 2.x: Q&A
    Replies: 0
    Last Post: 16 May 2013, 10:42 AM
  4. dataview.component.ListItem is not added correctly to the list
    By dannymartinho in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 4 Jan 2013, 5:53 PM
  5. How to create custom List Item
    By jsonproxy in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 12 Jan 2012, 8:45 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •