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'
}]
})
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 am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.
The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
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/