I have a controller and a view and want to push a line from a controller when item is selected.
Where it says onItemSelect: that's where I need to make a call, and don't know how...
Thank you.
controller is this:
Ext.define('Application.controller.ItemController', {
// Extend basic controller object
extend: 'Ext.app.Controller',
// Attach store classes to this controller
stores: ['Items'],
// Attach model classes to this controller
models: ['Item'],
// ..and last but not least - the view classes
views: ['item.List', 'item.Show'],
// Refs parameter defines references to certain
// instances of components pointed by selector
refs: [
{
// Ref determines the name of the automagic
// this.get[ref-goes-here] method that returns
// instance of certain component
ref : 'itemShowDesc',
// Select #item-description component in
// item.Show view
selector: 'itemShow > #item-description'
}
],
// when including the controllers in your application,
// the framework will automatically load the controller
// and call the init method on it
init: function() {
this.control({
'itemList' : {
// Action to be performed on select
select: this.onItemSelect
}
});
},
onItemSelect: function (selModel, selection) {
// Executed only when selection is a leaf
(selection.data.leaf) ? this.getItemShowDesc().addRow(selection.raw.description,'','','','','','') : null;
}
});
and the view is this:
Ext.define('Application.view.item.Show', {
extend: 'Ext.grid.Panel',
alias : 'widget.itemShow',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Application.model.Item'
],
xtype: 'cell-editing',
title: 'Favorite Books',
frame: true,
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: 680,
height: 350,
plugins: [this.cellEditing],
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: Application.model.Item,
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'resources/data/grid/books.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'book'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
}),
columns: [{
header: 'Book Id',
dataIndex: 'item_id',
width: 100
}, {
header: 'Author',
dataIndex: 'author',
width: 100
}, {
header: 'Title',
dataIndex: 'title',
width: 250
},{
header: 'Description',
dataIndex: 'description',
width: 495
},{
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney'
},{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
}
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
addRow: function(inItemID,inDisplay,inSex,inAuthor,inTitle,inDescription,inPrice){
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
item_id: inItemID,
display: inDisplay,
sex: inSex,
author: inAuthor,
title: inTitle,
description: inDescription,
price: inPrice
}, 'Item');
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
,
loadStore: function() {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'Favorites were loaded, data available for processing',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
},
onRemoveClick: function(grid, rowIndex){
this.getStore().removeAt(rowIndex);
}
})
Your ref for itemShowDesc is selecting a child component of itemShow. So when you do this.getItemShowDesc().addRow(), you're calling a method on whatever #item-description is, not on the Application.view.item.Show class.
Related
I am trying to add a GridPanle into a window. For this i have created a model, store and then created a panel and then adding this panel into window.
Facing issue with Panel column Headers.
The below is the code i am using.
function(orderModel, ex112ServiceResponse) {
var tablePopup = null;
var gridPanel = null;
var gridData = [];
var gridStore = null;
// Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'reasonCode',
mapping: 'reasonCode'
},
{
name: 'reasonCodeDescription',
mapping: 'reasonCodeDescription'
},
{
name: 'refField1',
mapping: 'refField1'
},
{
name: 'orderID',
mapping: 'orderID'
},
{
name: 'orderLineID',
mapping: 'orderLineID'
}
]
});
// Store data
//debugger;
debugger;
for (var index = 0; index < ex112ServiceResponse.objectReasonCode.length; index++) {
gridData.push(ex112ServiceResponse.objectReasonCode[index]);
}
gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: gridData
});
gridPanel = Ext.create('Ext.grid.Panel', {
id: 'gridId',
layout: 'fit'
store: gridStore,
stripeRows: true,
width: 800,
enableColumnMove: true,
enableColumnResize: true,
autoDestroy: true,
columns: [{
header: "SKU/Item Number",
dataIndex: 'refField1',
id: 'refField1',
//flex: .5,
sortable: true,
hideable: true
}, {
header: "Reason Code",
dataIndex: 'reasonCode',
id: 'reasonCode',
//flex: .5, // property defines the amount of space this column is going to take in the grid container with respect to all.
sortable: true, // property to sort grid column data.
hideable: true // property which allows column to be hidden run time on user request.
}, {
header: "Description",
dataIndex: 'reasonCodeDescription',
id: 'reasonCodeDescription',
//flex: 1,
sortable: true,
hideable: false // this column will not be available to be hidden.
},
{
header: "DO :: DO Line",
dataIndex: 'orderLineID',
id: 'doDoLine',
//flex: .5,
sortable: true,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
debugger;
var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
return do_DOLine;
}
}
]
});
tablePopup = new Ext.Window({
title: 'Cancellation Reason Codes',
id: 'crcWin'
width: 800,
closeAction: 'close',
plain: true,
autoDestroy: true,
items: [gridPanel]
});
tablePopup.show();
//Table Creation End
}
The issue is when the code create a popup for the first time. Popup looks good. But when i close the popup and clicks on a button in the second time created popup has issue. Column names have been changed.
Popup1:
Popup2:
Your help will be highly appreciated.
The issue is you have provided id to your extjs component and inside of window you have used config
//There is no close action in docs
closeAction: 'close'//Defaults to: 'destroy'
The closeAction to take when the close header tool is clicked:
destroy : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
hide : hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.
Note: This behavior has changed! setting does affect the close method which will invoke the appropriate closeAction.
Instead of using id you can use itemId.
In this FIDDLE, I have created a demo using your code. I hope this will help/guide you.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
function createWindow() { // Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'reasonCode',
mapping: 'reasonCode'
}, {
name: 'reasonCodeDescription',
mapping: 'reasonCodeDescription'
}, {
name: 'refField1',
mapping: 'refField1'
}, {
name: 'orderID',
mapping: 'orderID'
}, {
name: 'orderLineID',
mapping: 'orderLineID'
}]
});
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
model: 'StudentDataModel',
data: [{
reasonCode: '123',
reasonCodeDescription: 'test test',
refField1: 'it just exammple',
orderID: 1234,
orderID: 12345
}, {
reasonCode: '1231',
reasonCodeDescription: 'test1 test',
refField1: '!it just exammple',
orderID: 12341,
orderID: 123451
}]
});
var gridPanel = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: 'gridStore',
stripeRows: true,
enableColumnMove: true,
enableColumnResize: true,
autoDestroy: true,
//id: 'gridId',
columns: [{
header: "SKU/Item Number",
dataIndex: 'refField1',
//id: 'refField1',
flex: 1,
sortable: true,
hideable: true
}, {
header: "Reason Code",
dataIndex: 'reasonCode',
// id: 'reasonCode',
flex: 1,
sortable: true, // property to sort grid column data.
hideable: true // property which allows column to be hidden run time on user request.
}, {
header: "Description",
dataIndex: 'reasonCodeDescription',
// id: 'reasonCodeDescription',
flex: 1,
sortable: true,
hideable: false // this column will not be available to be hidden.
}, {
header: "DO :: DO Line",
dataIndex: 'orderLineID',
//id: 'doDoLine',
flex: 1,
sortable: true,
renderer: function (value, metadata, record, rowIndex, colIndex, store) {
var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
return do_DOLine;
}
}]
});
var tablePopup = new Ext.Window({
title: 'Cancellation Reason Codes',
width: window.innerWidth,
//id: 'crcWin',
plain: true,
modal: true,
autoDestroy: true,
closeAction: 'destroy', //If you want to use hide then you need to be show same window instead of new create
// closeAction: 'close', //https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.window.Window-cfg-closeAction
items: [gridPanel]
});
tablePopup.show();
}
Ext.create('Ext.button.Button', {
text: 'Create window',
renderTo: Ext.getBody(),
handler: createWindow
})
}
});
So I have made a simple list component view. When I tap a listing's disclosure button, I have a controller that will create a detail view that also pushes data about that respective listing into the detail view for use in a tpl property.
here is my code:
app/view/Main:
Ext.define ('Prac.view.Main', {
extend: 'Ext.Panel',
xtype: 'mainpanel',
requires: ['Prac.store.Names'],
config:{
layout: 'vbox',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Mainpanel',
items: [
{
xtype: 'button',
ui: 'confirm',
iconCls: 'add',
action: 'addName',
align: 'right'
}
]
},
{
xtype: 'list',
flex: 1,
grouped: true,
indexBar: true,
itemTpl: '{firstName} {lastName}',
store: 'Names',
onItemDisclosure: true,
}
]
}
});
app/controller/Main:
Ext.define ('Prac.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
view: 'viewpanel',
det: 'detail'
},
control: {
'list' : {
disclose: 'showDetail'
}
}
},
showDetail: function(list, record) {
var det = Ext.create('Prac.view.Detail', {
data: record.data
});
Ext.Viewport.setActiveItem(det);
}
});
app/view/Detail:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
}
});
I think that the issue might be of scope. Since the tpl property is nested inside the 'items' property rather than the config, the component is unable to use the data passed to the detail view from the controller. So I am wondering not just how to push data from one view to another, but how to push data from one view to a specific component in another view.
You are absolutely right. You are not setting data of the nested panel, you are setting the data of the Prac.view.Detail instead.
Data is a config property of a panel. That means sencha will create a setData() method for you. When you use this method internally applyData() or updateData() will be called respectively.
In your case this should work:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
},
updateData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
},
applyData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
}
});
So when one sets the data of the Prac.view.Detail the applyData method will be called and it grabs the nested panel to set its data instead.
I am using an ArrayStore and filling it up by adding model records.
This store is associated with a data grid.
Now the arraystore object is getting filled perfectly fine but the data is not coming up in the grid. In fact, on debugging, I found that the store of the grid (datagrid.store) also has the data, but still it does not display it on the screen!!
Following is my code.
Model:
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'attribute',
type: 'string'
},
{ name: 'attributeValue',
type: 'string'
}
]
});
Store:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});
Grid
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
//requires: ['Ext.ux.CheckColumn'],
autoRender: true,
extend: 'Ext.grid.Panel',
alias: ['widget.attributevaluegrid'],
id: 'SQLAttributeValueGrid',
store: attrValueStore,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
columns: [
{ /*Expression */
xtype: 'gridcolumn',
text: 'Attribute',
sortable: false,
menuDisabled: true,
flex: 0.225,
dataIndex: 'attribute'
},
{ /*Attribute Values*/
xtype: 'gridcolumn',
editor: 'textfield',
text: 'Values',
flex: 0.225,
dataIndex: 'attributeValue'
}
],
initComponent: function () {
this.callParent(arguments);
}
});
Modal Window displaying the grid
var attributeValueForm = Ext.create('Ext.window.Window', {
title:'Missing Attribute Values',
id: 'attributeValueForm',
height:500,
width:400,
modal:true,
renderTo: Ext.getBody(),
closeAction: 'hide',
items:[
{
xtype: 'attributevaluegrid',
border: false,
//height: 80,
region: 'center',
split: true
}
],
buttons: [
{
id: 'OKBtn',
itemId: 'OKBtn',
text: 'OK',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
},
{
text: 'Cancel',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
}
]
});
Now at the time of displaying the modal window, I checked the value of the store object as well as the store inside the grid object. Both are having the proper data.
But when the window opens, I am getting a blank grid
Maybe you need to load the store data... try with:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
autoLoad : true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});
I am getting the following error when trying to get the selected row:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'getView'
How do get the current selected row when I can't get the View and hence the SelectionModel?
My View Code:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var store = Ext.create('MyLodge.store.Members');
Ext.apply(this, {
height: this.height,
plugins: [rowEditing],
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'id',
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},{
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},{
text : 'Href',
width : 200,
editable: false,
sortable : true,
dataIndex: 'href'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
},'-',{
text: 'Save',
iconCls: 'icon-save',
handler: function(){
store.sync({
success: function(response){
store.load()
}
});
}
},{
text: 'Refresh',
handler: function(){
store.load();
}
}]
}]
});
this.callParent(arguments);
}
});
One option would be adding the scope to the closure as a variable:
initComponent: function () {
var me = this;
.
.
So in your handler you can use me to refer to the grid:
{
text: 'Delete',
iconCls: 'icon - delete ',
handler: function () {
var selection = me.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}
Working example: http://jsfiddle.net/Sn4fC/
A second option can be setting a click listener instead of the handler and specifying the scope:
{
text: 'Delete',
iconCls: 'icon - delete ',
listeners: {
click: {
scope: this,
fn: function () {
var selection = this.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}
}
}
Working example: http://jsfiddle.net/XyBbF/
The issue is that 'grid' is not available in the handler function scope or it is not the one what you actually expected it to be.
handler: function(){
//.... keep the debug point here in browser developer tool and verify the value of grid in console. It is definitely not an instance of the grid u expected hence it wont have getView() method.
var selection = grid.getView().getSelectionModel().getSelection()[0];
}
Try getting the reference of grid and use it in handler as shown below:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
id: 'membergrid',
......
handler: function(){
var grid = Ext.getCmp('membergrid'); // where 'membergrid' is the id defined in grid config
var selection = grid.getView()......
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.