1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default Answered: EASY ? Problem: DnD Item is draggable within container but not into an other ...

    Answered: EASY ? Problem: DnD Item is draggable within container but not into an other ...


    I am standing on the line - maybe someone can give me input - because I got no error-output (also on debug mode):

    I have generated 5 Ext.Container with a lot of Items in are draggable within this container.

    Also I have made all 5 Container dropable and gave them the same DnDGroup like the Items.
    So all are in same Group.
    All 5 Containers are in a Panel next to each other.

    I only can dragg around items within their own container and not over Container-Borders into a Container next to it.

    I have done everything like in the Container-Example.

    I have no Ideas why they do not leave there Container.

    I tried to override/uncomment parts of DD ... to get Debug-Data (console.log) like described in DD.js ... but I do not get some.
    In my opinion I should get, because I can dragg around within a container and they accept a new position.

    I think it is a stupid Mistake or a Bug. (ExtJS 4.2.1).

    Hope someone see from my description what I do wrong maybe. Posting Code is bad Idea - It is 800 Lines..

    Any Ideas ?
    I helped others - please help me

  2. Hum, the way I see it, what you are trying to accomplish it will be very hard the way you are building your app because as far as I know only panels can be dragged outside of their container.

    So, one option is to create every item of your container within a panel with the property simpleDrag: true

    Or and another option is to create your items inside of an Ext.view.View object and use divs to drag your content like the example: http://docs.sencha.com/extjs/4.2.2/#...dropzones.html

  3. #2
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    78
    Answers
    10
    Vote Rating
    21
    glopes will become famous soon enough glopes will become famous soon enough

      2  

    Default


    Hum, the way I see it, what you are trying to accomplish it will be very hard the way you are building your app because as far as I know only panels can be dragged outside of their container.

    So, one option is to create every item of your container within a panel with the property simpleDrag: true

    Or and another option is to create your items inside of an Ext.view.View object and use divs to drag your content like the example: http://docs.sencha.com/extjs/4.2.2/#...dropzones.html

  4. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default XTemplate with xtypes ?

    XTemplate with xtypes ?


    First: BIG THANKYOU to glopes !!!

    as far as I know only panels can be dragged outside of their container
    This was an important cause for thought in a new direction.

    Finally after searching for ways to figure out how to make my items each a panel itself (because your are right !!) ... I hang on XTemplates at the moment and hope there is a way to pass in xtypes into Tpl ... but where I found similar questions there where no answers.

    For example 123lal how asks this in Ext.XTemplate Doc:
    Is it possible to insert a "xtype : button" inside tpl, with other parameters like "action : download, name : dwnload, etc"
    Does anyone know a way ... or have an initial Idea which direction to think ... to find a solution ?

    So, one option is to create every item of your container within a panel with the property simpleDrag: true
    Yes - I think this should be the final goal

    Hope for more INPUT going to think - I promise to show you my final solution

    Any Ideas ?

  5. #4
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    78
    Answers
    10
    Vote Rating
    21
    glopes will become famous soon enough glopes will become famous soon enough

      2  

    Default


    Well, if you want to create a button inside your template, you should use standard HTML to create it...
    Code:
    '<tpl for=".">' +
                    '<div class="patient-source"><table><tbody>' +
                        '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
                        '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
                        '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
                        '<tr><td class="patient-name"><input type="submit" value="Submit" action="test" onClick="console.log(Ext.fly(this))"></td></tr>' +
                    '</tbody></table></div>' +
                 '</tpl>'

  6. #5
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default


    the button is not the Problem
    challenge is to bring xtypes into XTemplate combined with content...
    But I think this is not planed for XTemplate.
    The only way I think it could work is to put in something like this into XTemplate:

    PHP Code:
    <div id=[{values.id}]><script>
    // ExtJS code to create a Panel
    </script>
    </div> 
    I think this would be the only way ?

    Any Ideas ? Would this be also your own solution if you have to do this ?

    Thanks for you help - I am going to mark your Answer as best answer (if there is no better answer next)

  7. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default


    Now - I think it is to high for me

    Maybe on other programmer can see my Problem...

    Basd on discussion I build the following template

    PHP Code:
    tpl: [
                    
    '<tpl for=".">',
                        
    '<div class="card" id="card-{[values.data.uniqueCardObjectId]}">',
                            
    '<div class="content" height="96" width="64" >',
                            
    '<script>',
                            
    'Ext.onReady(function(){',
                            
    'Ext.create(\'Ext.panel.Panel\',{',
                                
    'draggable: true,',
                                
    'draggGroup: \'cardDnDGroup\',',
                                
    'renderTo: Ext.getById(\'card-{[values.data.uniqueCardObjectId]}\'),',
                                 
    'html: \'<img src="'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg"  height="96" width="64">\'',
                                
    ']',
                            
    '})',
                            
    '})',
                            
    '</script>',
                                
    //    'card-{[values.data.id]}',
                            
    '</div>',
                        
    '</div>',
                    
    '</tpl>'
                
    ].join(''), 
    firebug shows a correct scripting tag:

    PHP Code:
    Ext.onReady(function(){Ext.create('Ext.panel.Panel',{draggabletrue,draggGroup'cardDnDGroup',renderToExt.getById('card-0-0'),html'<img src="./app/plugins/startrek1e/sets/setimages/general/jonathanarcher.jpg"  height="96" width="64">']})}) 
    But it does nothing...

    Any Ideas ?
    Maybe I need another trigger than Ext.onReady ?

  8. #7
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    78
    Answers
    10
    Vote Rating
    21
    glopes will become famous soon enough glopes will become famous soon enough

      2  

    Default


    I haven't worked with XTemplates all that much but as far as I know, if you want to run scripts inside templates, you need to use {% %} instead of putting it between tags..like {% console.log('Testing...'); %}

  9. #8
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default Solution is in afterRender

    Solution is in afterRender


    Part of Tpl:
    PHP Code:
    '<script>',
                        
    '["card-{[values.data.uniqueCardObjectId]}","'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg"]',
                        
    '</script>'
    Ext.define of View has to get this code in afterRender:
    PHP Code:
    afterRender:function(){
                    var 
    me this;
                    
    this.callParent(arguments);    
                    var 
    script Ext.get(me.el.id).select('script'); //tag <script> in tpl
                       
                
    Ext.each(script.elements, function(scriptEl){
                        var 
    arr1 = [];
                        
    arr1 = eval(scriptEl.childNodes[0].data);
                       
                        var 
    pan Ext.create('Ext.panel.Panel',{
                                
    draggabletrue,
                                
    draggGroup'cardDnDGroup',

                            
    renderToExt.get(arr1[0]), //card-{[values.data.uniqueCardObjectId]}
                         // arr1[1] is Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg
                                
    html'<img src="'+arr1[1]+'"  height="96" width="64">'
                            
    });
                
                    
    //    Ext.get(arr1[0]).setHTML(pan.body.dom);
                    
    })
    //:
    //:

    So this changes my DOM-Items into Panels

    Thanks once more !!

Thread Participants: 1

Tags for this Thread