PDA

View Full Version : Drag and Drop kitchensink Example CSS file is missing.



nvignesh86
9 Oct 2017, 8:29 PM
how can i get style.css file from this example.

import './styles.css';

http://examples.sencha.com/ExtReact/...rag__drop/data (http://examples.sencha.com/ExtReact/6.5.1/kitchensink/#/components/drag__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);
}
}

bodyboarder20
17 Oct 2017, 11:20 AM
Is this what youre looking for?
https://github.com/sencha/extjs-reactor/blob/master/packages/reactor-kitchensink/src/examples/DragAndDrop/Data/styles.css