Results 1 to 2 of 2

Thread: Drag and Drop kitchensink Example CSS file is missing.

  1. #1

    Default Drag and Drop kitchensink Example CSS file is missing.

    how can i get style.css file from this example.

    import './styles.css';

    http://examples.sencha.com/ExtReact/...rag__drop/data



    import React, { Component } from 'react';
    import { Panel } from '@extjs/ext-react';
    import './styles.css';


    Ext.require(['Ext.drag.*']);


    export default class Data extends Component {


    render() {
    return (
    <Panel
    ref="mainPanel"
    padding={5}
    shadow
    >
    <div ref="source" className="data-source">
    <div data-days="2" className="handle">Overnight</div>
    <div data-days="7" className="handle">Expedited</div>
    <div data-days="21" className="handle">Standard</div>
    </div>
    <div ref="target" className="data-target">Drop delivery option here</div>
    </Panel>
    )
    }


    componentDidMount() {
    // When the drag starts, the describe method is used to extract the
    // relevant data that the drag represents and is pushed into the info
    // object for consumption by the target.
    this.source = new Ext.drag.Source({
    element: this.refs.source,
    handle: '.handle',
    constrain: this.refs.mainPanel.el,
    describe: info => {
    info.setData('postage-duration', info.eventTarget.getAttribute('data-days'));
    },
    listeners: {
    dragstart: (source, info) => {
    source.getProxy().setHtml(info.eventTarget.innerHTML);
    }
    },
    proxy: {
    type: 'placeholder',
    cls: 'data-proxy'
    }
    });


    this.target = new Ext.drag.Target({
    element: this.refs.target,
    validCls: 'data-target-valid',
    listeners: {
    drop: (target, info) => {
    // Get the data from the info object and use it to display the expectation to the user.
    info.getData('postage-duration').then(duration => {
    const s = Ext.String.format('Your parcel will arrive within {0} days', duration);
    Ext.Msg.alert('Delivery set', s);
    })
    }
    }
    })
    }


    componentWillUnmount() {
    Ext.destroy(this.source, this.target);
    }
    }

  2. #2
    Sencha Premium User
    Join Date
    May 2009
    Posts
    79
    Answers
    1

Similar Threads

  1. Replies: 0
    Last Post: 9 Oct 2017, 8:26 PM
  2. Drag and Drop File
    By julian.osorio.g in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 7 Jul 2017, 11:11 AM
  3. KitchenSink.model.Base for Drag & Drop
    By jrock1979 in forum Ext 5: Q&A
    Replies: 1
    Last Post: 12 Nov 2014, 11:16 AM
  4. File Drag and Drop in an HTMLEditor
    By aolee in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 13 Jul 2011, 4:17 AM

Tags for this Thread

Posting Permissions

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