I am having a Container. Inside that container I am having 3 companent with draggable: true as below image
I can drag the 3 components within the parent container (move up and down)
But I need to move the 3 component outside the container to left and right side (marked in arrow).
Screenshot of my current screen. I want to move the componets (10, 20, 30) to left side
Can someone please help me on this.
this is the code that I am using
{
xtype: 'container', //Middle Container
width: '100%',
height: '80%',
style: 'background-color: #669900',
layout: 'hbox',
items: [{
xtype: 'component',
itemId: 'markCompxx10',
draggable: true,
width: '100%',
height: '30%',
style: 'background-color: #00EE00',
html: '10',
listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}, {
xtype: 'component',
itemId: 'markCompxx20',
draggable: true,
width: '100%',
height: '30%',
style: 'background-color: #00EE00',
html: '20',
listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}, {
xtype: 'component',
itemId: 'markCompxx30',
width: '100%',
height: '30%',
style: 'background-color: #00FFEE',
html: '30',
listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}]
}
}
thanks
Check out my drag & drop plugin and example. I improved draggable class to support not only components but also elements. That way i could manage to do what you couldnt.
If it doesnt help you, reproduce the same problem in sencha fiddle, so that i can help you.
Related
I'm trying to display a "list" of containers: I mean I created a container ( I'll call it container A ) to display data:
ID docked on the left of the container, name on top, task name ( for example ) at bottom and date docked on the right.
Next I try to display this containers in another container ( container B): some containers inside a bigger container so I can display the data.
But I need to select a container A if I want to delete or edit it. How can I do it?
Thank you very much.
Edit:
Code: "container A" (.../app/view/Cliente.js)
Ext.define('proyecto.view.Cliente', {
extend: 'Ext.Container',
xtype: 'cliente',
requires: ['Ext.TitleBar'],
config: {
title: 'Cliente',
iconCls: 'info',
xtype: 'container',
layout: 'vbox',
margin: 10,
padding: 5, border: 15,
items: [
{
docked: 'left',
xtype: 'container',
width: 100,
html: 'ID_cliente',
style: 'background-color: #00CED1'
},
{
xtype: 'container',
flex: 2,
html: 'Nombre',
style: 'background-color: #6495ED'
},
{
xtype: 'container',
flex: 1,
html: '<DIV ALIGN=right><span style="background-color:#4169E1">Asignaciones</span></DIV>',
},
]
}});
Code: "container B" (.../app/view/ListaClientes.js)
Ext.define('proyecto.view.ListaClientes', {
extend: 'Ext.Container',
xtype: 'listaclientes',
requires: ['Ext.TitleBar', 'proyecto.view.Cliente'],
config: {
title: 'Lista de Clientes',
iconCls: 'team',
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Lista de clientes',
docked: 'top',
items: [
{
text: 'Nuevo'/*,
action: 'nuevocliente'*/
},
{
text: 'Editar'/*,
action: 'editarcliente',
enableOnSelection: true,
disabled: true */
},
{
xtype: 'spacer'
},
{
text: 'Eliminar'/*,
action: 'eliminarcliente',
enableOnSelection: true,
disabled: true */
}
]
},
{ //example visualization
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
}
]
}});
Screen Container B: I can't upload the screen here, I'm newbie :(
http://s7.postimg.org/q0gppq8h7/Container_B.jpg
I would assume the container you mentioned is not a generic container in HTML form concept but a real class in sencha touch.
I would recommend you to have a look how to use the component query in sencha touch framework, as that is the most powerful and basic search utility in the framework. if you organise your object properly, it can get anything for you easily. if you from css & jquery selector background, you feel you were home when checking how to use
have a look here:
http://docs.sencha.com/touch/2.3.1/#!/api/Ext.ComponentQuery
if you also interested with the jquery type of search which is at the dom level, here is a good example.
http://docs.sencha.com/core/manual/content/element.html
also, some similar feature offered in:
docs.sencha.com/touch/2.3.1/#!/api/Ext-method-getCmp
I use the 2.3 as an example, but these features exist since earlier release. Hopefully these can help.
How to tell extjs4 stretch just one element in hbox layout?
For example I have the following layout:
{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
// GRID, needs to be stretched
}, {
// button, don't stretch
}, {
// another button, don't stretch
}]
}
In the code above I have all elements (including buttons) are stretched. Is it possible in box layouts?
I can, of course, wrap buttons in the hbox container, but I don't like this solution.
One workaround you could use is to give the buttons a maxHeight, since constrains always "win".
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
width: 400,
height: 300,
renderTo: document.body,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
title: 'A panel'
}, {
xtype: 'button',
text: 'B1',
maxHeight: 25
}, {
xtype: 'button',
text: 'B2',
maxHeight: 25
}]
})
});
I'm trying to build an interface that has a header bar with a logo centered in the top. Here's the code I'm using. The image doesn't show. Upon inspecting the elements at run time, element is showing with a height of '0' instead of using the 100% to match the height of the containing element.
Ext.define("RFN.view.Main", {
extend: 'Ext.TabPanel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Calculate',
iconCls: 'home',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[
{
xtype: 'image',
src: 'resources/images/logo.png',
height: '100%'
}
],
flex: 1
},
{
xtype: 'panel',
style: 'background-color: #999999;',
flex:4
}
]
},
{
title: 'Compare',
iconCls: 'chart2',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
style: 'background-color: #174a7c;',
flex: 1
},
{
style: 'background-color: #999999;',
flex:4
}
]
}
]
}
});
Just add a layout config on the panel that contains the image. You can then remove the height config on you image as the layout make the inner item fit the whole height and width automatically :
...
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[{
xtype: 'image',
src: 'resources/images/logo.png',
}],
flex: 1
...
Hope this helps
Or you can do what I did and have a layout of vbox, the header had a flex of 0.3 and my tabpanel 0.7. The item that was 0.3 was a panel, and in the class config (cls) I had my CSS class name e.g. Header. In my CSS class .header I had set the background and logo. Hope this helps...
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.
I am using Sencha Touch to create a newletter layout. I start with a vbox panel (P1). Within this panel is a hbox panel (P1Content) that has "left column", spacer and "right column" panels. Both columns are vbox and contain panels themselves with content. I then try to add another panel underneath P1Content (P1Bottom). Here's the problem. P1Bottom overlaps with P1Content's content. I used Web Inspector and discovered that Sencha Touch set the height of Panel A's to be 0px. If I set the height of P1Content to a certain value (e.g. 1000px), it's fine. However, I can't depend on a fixed value: The content of the panels is dependent on the user's selectio. I want Sencha Touch to calculate the height like it does with its other elements.
What do I do?
var P1LeftColumn = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
cls: 'columnleft',
flex: 25,
items: [A,B]
});
var P1RightColumn = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
cls: 'columnright',
flex: 25,
items: [
D,
{ height: 20 },
E,
{ height: 20 },
F,
{ height: 20 },
G
]
});
var P1Content = new Ext.Panel({
layout: { type: 'hbox', align: 'stretch' },
// height: '1000px', Can't do this because the height is dynamic depending on the user's selection
items: [
P1LeftColumn,
{ flex: 1 },
P1RightColumn
]
});
var P1Bottom = new Ext.Panel({
html: 'This should appear below the columns but overlaps them instead.'
});
var P1 = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
items: [P1Banner, P1Header, P1Content, P1Bottom]
});
From a glance it seems you need to put flex in the panels config option
Layout:{ type: 'hbox', align: 'stretch' },
flex:1,
items:[]