Related
i have tried do calling form by button from Main view using controller. So I use Main view js, form js and controller js:
Ext.define('App.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
. . .
items: [{
xtype:'button',
ui: 'action',
text: 'Renter',
id: 'RenterId',
handler:'adClick'
. . .
and controller js:
Ext.define('App.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.button',
requires: ['App.view.forms.RenterData',
],
views: ['App.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
adClick: function() {
Ext.create('Ext.panel.Panel', {
title:'Test',
layout: 'fit',
autoshow: true,
items: {
xtype:'panelxtype'
}
})
}
});
When I try clicking my button, I face with next: No method "nameOfHandler" named on Ext.Button. So i think handler from Main view dosn't work...
Here is a working example of what you want with a controller Fiddle
app.js
Ext.application({
name: 'Test',
requires: ['Test.view.Main', 'Test.view.MyForm'],
mainView: 'Test.view.Main',
launch: function () {}
});
app/view/Main.js
Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
requires:['Test.view.MainController'],
controller:'mainController',
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: 'onOpenForm'
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: 'onOpenFormInPanel'
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MainController.js
Ext.define('Test.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainController',
onOpenFormInPanel: function () {
let myForm = Ext.create('Test.view.MyForm')
this.getView().items.getAt(1).add(myForm);
},
onOpenForm: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
});
app/view/MyForm.js
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})
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'
}]
}]
});
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 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();
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/