I tried asking this question on the sencha forums and didn't have any luck:
http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner
I'm attempting to add a small panel within another panel and allow users to drag it around the screen.
Ext.define('CS.view.StartScreen', { extend: 'Ext.panel.Panel',
alias: 'widget.startscreen',
items: [{
xtype: 'panel',
title: 'Hello',
// closable: true,
// collapsible: true,
draggable: true,
// resizable: true,
// maximizable: true,
constrain: true,
height: 300,
width: 300
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: 'hbox',
pack: 'center',
items: [
{xtype: 'button', text: 'Click Me'}
]
}]
});
However whenever I attempt to drag the panel it snaps back to the upper left hand corner. Can anyone tell me what I'm doing wrong? Thanks!
Edit 1
Complete code of application with problem:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'CS',
appFolder: 'ccms/app',
autoCreateViewport: true,
controllers: [
'TestCreator',
'Primary',
'Manager'
],
launch: function(){
}
});
TestCreator.js
Ext.define('CS.controller.TestCreator', {
extend: 'Ext.app.Controller',
views: [
'testcreator.ViewTestCreator'
],
init: function(){
console.log('testcreator init');
this.control({
});
}
});
Primary.js
Ext.define('CS.controller.Primary',{
extend: 'Ext.app.Controller',
views: [
'ViewLogin',
],
init: function(){
this.control({
'viewport': {
afterrender: function(viewport, opts){
viewport.add([{
xtype: 'viewlogin',
itemId: 'viewlogin'
}]);
}
},
'viewlogin button[text = Submit]': {
click: function(btn, e, eOpts){
var form = btn.up('form').getForm();
form.submit({
success: function(form, action){
console.log(action.result);
btn.up('viewport').remove('viewlogin');
var viewport = Ext.ComponentQuery.query('viewport');
if(viewport.length > 0)
viewport[0].add({xtype: 'dashboard'});
},
failure: function(form, action){
},
scope: this
});
}
}
});
}
});
Manager.js
Ext.define('CS.controller.Manager', {
extend: 'Ext.app.Controller',
views: [
'ViewDashboard'
],
init: function(){
this.control({
'viewport > formbuilder': {
render: function(){
console.log('render yo');
}
}
});
}
});
Viewport.js
Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit'
})
ViewLogin.js
Ext.define('CS.view.ViewLogin',{
extend: 'Ext.panel.Panel',
alias: 'widget.viewlogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'start'
},
items: [{
flex: 1,
border: false
},{
xtype: 'form',
url: '/index.php/auth',
baseParams: {
csrf_token: Ext.util.Cookies.get('ci_csrf'),
cs_method: 'user_login'
},
width: 300,
layout: 'anchor',
title: 'Login',
defaults: {
margin: '5 5 5 5'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
inputType: 'text',
name: 'username'
},{
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'password'
}],
buttons: [{
text: 'Reset',
handler: function() {
console.log('button pressed');
this.up('form').getForm().reset();
}
},{
text: 'Submit'
}]
},{
flex: 2,
border: false
}]
});
ViewDashboard.js
Ext.define('CS.view.ViewDashboard', {
extend: 'Ext.panel.Panel',
alias: 'widget.dashboard',
layout: 'fit',
bodyStyle: {"background-color":"#FF6600"},
items: [{
xtype: 'testcreator'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: 'hbox',
pack: 'center',
items: [{
xtype: 'splitbutton',
text: 'Applications',
handler: function(){
console.log('splitbutton');
},
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1', hander: function(){}},
{text: 'Item 2', hander: function(){}},
]
})
}]
}],
listeners: {
render: function(sender){
console.log(sender);
sender.dropZone = new Ext.dd.DropZone(sender.body, {
getTargetFromEvent: function(e) {
console.log('getTargetFromEvent');
var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
console.log(temp);
return temp;
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
console.log('onNodeDrop');
data.panel.setPosition(50, 50, true);
return true;
}
});
}
}
});
TestCreator.js
Ext.define('CS.view.testcreator.ViewTestCreator', {
extend: 'Ext.panel.Panel',
alias: 'widget.testcreator',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
draggable: true,
title: 'Form Builder',
width: 600,
height: 450,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: 'hbox',
items: [{
text: 'File'
},{
text: 'Edit'
},{
text: 'Help'
}]
}],
items: [{
html: 'panel 1',
flex: 1
},{
html: 'panel 2',
flex: 2
}]
});
You have to implement drop zone for CS.view.StartScreen. For example you can add following render handler to the code:
render: function(sender) {
sender.dropZone = new Ext.dd.DropZone(sender.body, {
getTargetFromEvent: function(e) {
return {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
data.panel.setPosition(target.x, target.y);
return true;
}
});
}
Working sample: http://jsfiddle.net/lolo/5MXJ9/2/
Related
var radioGroup = {
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
width: 700,
defaults: {
flex: 1
},
items: [{
boxLabel: option1
name: 'timeInterval',
inputValue:0
checked: true
}, {
boxLabel: option2
name: 'timeInterval',
inputValue:1,
checked: false
}, {
boxLabel: option1
name: 'timeInterval',
inputValue:2,
checked: false
}],
listeners: {
change: function (radio, newValue, oldValue) {
if (radio.getValue().timeInterval == 2) {
cardPanel.layout.setActiveItem(0);
//getting error cardPanel.layout.setActiveItem is not a function
} else if (radio.getValue().timeInterval == 0) {
cardPanel.layout.setActiveItem(1);
} else if (radio.getValue().timeInterval == O1) {
cardPanel.layout.setActiveItem(2);
}
}
}
};
var cardPanel = {
layout: 'card',
itemId: 'PanelID',
activeItem: 0,
items: [{
itemId: 'timeIntervalPanel',
name: 'timeInterval',
xtype: 'timeintervalpanel',
selection: this.defaultData,
dateFormat: this.dateFormat,
timeFormat: this.timeFormat
}, {
id: 'specificIntervalPanel',
name: 'timeInterval',
xtype: 'specificinterval',
selection: this.defaultData
}, {
itemId: 'emptyPanel',
name: 'emptyCard',
xtype: 'panel'
}]
};
You need to use following steps :-
First you need to get component which you have provided layout:"card" in change event of RadioGroup.
Now, you need to get getLayout() of your component.
Now need to use setActiveItem(newItem) method of card layout component.
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help you.
Code Snippet
//Timeinterval panel
Ext.define('Timeintervalpanel', {
extend: 'Ext.panel.Panel',
xtype: 'timeintervalpanel',
html: 'This is timeintervalpanel'
});
//Specific Interval panel
Ext.define('SpecificInterval', {
extend: 'Ext.panel.Panel',
xtype: 'specificinterval',
html: 'This is specificinterval'
});
//Empty Panel
Ext.define('EmptyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'emptyPanel',
html: 'This is emptyPanel'
});
//Panel with radio button and card item.
Ext.create('Ext.panel.Panel', {
title: 'Card Layout Example with radio buttons',
renderTo: Ext.getBody(),
height: window.innerHeight,
layout: 'vbox',
tbar: [{
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
defaults: {
flex: 1,
margin: 5,
name: 'timeInterval'
},
items: [{
boxLabel: 'Timeinterval panel',
inputValue: 0,
checked: true
}, {
boxLabel: 'Specific Interval',
inputValue: 1
}, {
boxLabel: 'Empty Panel',
inputValue: 2
}],
listeners: {
change: function (radio, newValue, oldValue) {
var cardPanel = radio.up('panel').down('#PanelID').getLayout();
cardPanel.setActiveItem(newValue.timeInterval);
//Only just for animation
//activeItem.getEl().slideIn('r');
}
}
}],
items: [{
//This panel have provided card layout.
xtype: 'panel',
flex: 1,
width: '100%',
layout: 'card',
itemId: 'PanelID',
defaults: {
bodyPadding: 20
},
items: [{
xtype: 'timeintervalpanel'
}, {
xtype: 'specificinterval'
}, {
xtype: 'emptyPanel'
}]
}]
});
Ext.define('iTell.view.MarketView', {
extend: 'Ext.Container',
xtype: 'marketview',
config: {
scrollable: false,
layout: 'fit',
items: [
{
xtype: 'toolbar',
title: Malls,
docked: 'top',
items: [
{
xtype: 'button',
ui: 'back',
text: 'Back',
cls: 'backBtnCls',
iconMask: true,
id: 'exitAppBtn',
handler: function () {
this.up('marketview').fireEvent('exitApp', this);
}
},
{
xtype: 'spacer'
},
]
},
{
xtype: 'list',
loadingText: "",
scrollable: true,
scrollToTopOnRefresh: false,
selectedCls: 'item_selected_bg_style',
store: 'MarketStore',
},
]
},
loadData: function () {
test();
}
test(){
alert("this is the method to been called");
}
});
Why the test method not been called?
Add the this pointer
this->test();
I'd been searching for so long and I cannot find a concrete answer. Let's say I have an extended control from panel like this:
Ext.define('MyApp.view.admin.User',{
extend: 'Ext.panel.Panel',
config: {
canAdd: false,
canDelete: false,
canEdit: false
},
constructor: function(config){
this.initConfig(config);
this.callParent(arguments);
},
xtype: 'user',
requires: [
'MyApp.view.admin.UsersGrid',
'MyApp.view.admin.UserModel',
'MyApp.view.admin.UserController',
'MyApp.model.User'
],
viewModel: {
type: 'user'
},
controller: 'user',
frame: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'users-grid',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
glyph: MyApp.util.Glyphs.getGlyph('add'),
hidden: **[config.canAdd]**
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Edit',
hidden: **[config.canEdit]**
hidden: this.setElementConfiguration,
glyph: Mofeg.util.Glyphs.getGlyph('edit'),
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Eliminar',
glyph: MyApp.util.Glyphs.getGlyph('destroy'),
listeners: {
click: 'onDelete'
}
}
]
}
]});
I want to apply the hidden properties of the buttons based on the initial configurations, how can I accomplish it?
You can write an initComponent:
initComponent: function () {
var me = this,
editButton = Ext.ComponentQuery.query('button[itemId=edit]')[0],
canEdit = me.getCanEdit();
editButton.setHidden(canEdit);
me.callParent(arguments);
}
I am trying to make two lists in a same view, I am separating the view in two flex boxes and inside of this includes each list but it is not working properly.. any clue of this implementation or suggestion? I am working with Sencha Touch 2.3.1 framework.
Thanks in advance.
/**
* The home view
*/
Ext.define('xx.view.home.BlocksHome', {
extend : 'Ext.Container',
xtype : 'blocksHome',
requires: [
'Ext.TitleBar',
'Ext.dataview.List',
'xx.view.news.News'
],
config : {
items: [
// selection container
{
xtype : 'container',
cls : 'home-container',
flex : 2,
layout : {
type : 'hbox',
align: 'stretch'
},
defaults: {
xtype : 'container',
styleHtmlContent: true,
flex : 1
},
items : [
// Data Collection
{
cls : 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [
{
cls : 'news-collection-header',
layout: 'hbox',
items: [
{
html: '<h4>' + xx.Text.getText('NEWS') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text : xx.Text.getText('NEWS'),
flex: 1
},
{
xtype: 'news',
layout: 'card'
}
]
}
]
},
// Customers
{
cls : 'open-activities',
layout: 'vbox',
items: [
{
cls : 'open-activities-header',
layout: 'hbox',
items : [
{
html: '<h4>' + xx.getText('ACTIVITY_LIST_TITLE') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text : xx.Text.getText('ACTIVITY_LIST_TITLE'),
flex: 1
}
]
}
]
}
]
}
]
}
});
And here the view include in a card layout named "news"
Ext.define('xx.view.news.List', {
extend: 'Ext.dataview.List',
xtype: 'news',
requires: [
'Ext.TitleBar',
'Ext.plugin.PullRefresh'
],
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
listeners: {
painted: function(element) {
if (Ext.browser.is.IE) {
// position pull to refresh centered
Ext.get(element.query('.x-list-pullrefresh')[0]).setStyle('left', (Ext.getBody().getWidth() / 2) - 132 + 'px');
}
}
}
}
],
store: 'News',
itemTpl: '<div class="newslistline">' +
' <div class="newssubject"><tpl if="unread == \'true\'"><span style class="newsNew">new</span></tpl>{subject}</div>' +
' <div class="newsupdatedate">{[xx.Helper.formatSAPdate2Str(values.updatedate)]}</div>' +
' <div class="newsupdateby">{responsible}</div>' +
' <div class="newsattachment {[values.attflag == \'true\'? \'attachment\' : \' \']}">' +
' </div>' +
' </div>',
emptyText: xx.Text.getText('NEWS_LIST_EMPTY'),
loadingText: xx.Text.getText('NEWS_LIST_LOADING'),
items: [
{
docked: 'top',
xtype: 'titlebar',
title: xx.Text.getText('NEWS_LIST_TITLE')
}
]
}
});
Add flex:1 to each list. Here is a working example I created using Sencha Fiddle.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('News', {
extend: 'Ext.data.Model',
config: {
fields: ['subject']
}
});
var store1 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Item1'
}, {
subject: 'Item2'
}]
});
var store2 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Record1'
}, {
subject: 'Record2'
}]
});
Ext.define('xx.view.news.List', {
extend: 'Ext.List',
xtype: 'news',
requires: ['Ext.TitleBar'],
emptyText: 'Empty',
loadingText: 'Loading',
config: {
itemTpl: '<div class="newslistline">{subject}</div>'
}
});
Ext.create("Ext.Container", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xtype: 'container',
cls: 'home-container',
flex: 2,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
styleHtmlContent: true,
flex: 1
},
items: [{
cls: 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [{
cls: 'news-collection-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2
}, {
xtype: 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store1
}]
}, {
cls: 'open-activities',
layout: 'vbox',
items: [{
cls: 'open-activities-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2,
itemTpl: '<div class="newslistline">{subject}</div>'
}, {
xtype: 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store2
}]
}]
}]
});
}
});
I am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.
Help?
My controller:
Ext.define('STK.controller.SiteSelectController', {
extend: 'Ext.app.Controller',
stores: ['Inventory', 'Stacker', 'Stackers'],
models: ['Inventory', 'Stackers'],
views: ['scheduler.Scheduler'],
refs: [{
ref: 'stackerselect',
selector: 'panel'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
/* render all default functionality */
onPanelRendered: function () {
var view = this.getView('Scheduler'); // this is null?
}
});
My view:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel']);
var filters = {
ftype: 'filters',
autoReload: false,
encode: false,
local: true
};
Ext.define('invtGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.inventorylist',
title: 'Inventory List',
store: 'Inventory',
multiSelect: true,
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'invtGridDDGroup',
dropGroup: 'stackerGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
features: [filters],
stripeRows: true,
columns: [{
header: 'OrdNum',
sortable: true,
dataIndex: 'ordNum',
flex: 1,
filterable: true
}, {
header: 'Item',
sortable: true,
dataIndex: 'item',
flex: 1,
filterable: true
}, {
header: 'Pcs',
sortable: true,
dataIndex: 'pcs',
flex: 1,
filterable: true
}]
});
Ext.define('stackerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.stackerselect',
title: 'Stacker Select',
store: 'Stacker',
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'stackerGridDDGroup',
dropGroup: 'invtGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
columns: [{
header: 'OrdNum',
dataIndex: 'ordNum',
flex: 1
}, {
header: 'Item',
dataIndex: 'item',
flex: 1
}, {
header: 'Pcs',
dataIndex: 'pcs',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Submit',
action: 'submit'
}, {
text: 'Reset',
action: 'reset'
}]
}, {
xtype: 'toolbar',
dock: 'top',
items: [{
id: 'combo',
xtype: 'combobox',
queryMode: 'local',
fieldLabel: 'Stacker',
displayField: 'stk',
valueField: 'stk',
editable: false,
store: 'Stackers',
region: 'center',
type: 'absolute'
}]
}]
});
Ext.define('STK.view.scheduler.Scheduler', {
extend: 'Ext.panel.Panel',
alias: 'widget.schedulerview',
title: "Scheduler Panel",
layout: {
type: 'column'
},
items: [{
xtype: 'inventorylist',
width: 650,
height: 600,
columnWidth: 0.5,
align: 'stretch'
}, {
xtype: 'stackerselect',
width: 650,
height: 600,
columnWidth: 0.5
}]
});
As I said, Extjs creates getter for your views (those listed in the controller's view array) and you get access to them:
var view = this.getSchedulerSchedulerView();
Once you have the view reference you can do this to get access to the contained grid:
var grid = view.down('.inventorylist');
grid.disable();