Develop Reference

Default value in grid

I have a grid/list:
items: [
{
xtype: 'gridpanel',
reference: 'list',
resizable: false,
width: 200,
title: '',
forceFit: true,
bind: {
store: '{schedules}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'revision',
text: 'Revision'
}
],
I want to add a listener so that the record at index 0 in the store is selected by default.
I've tried playing with selModel but its not working as intended.

Do it on viewready event:
{
xtype: 'gridpanel',
listeners: {
'viewready': function(g) {
g.getSelectionModel().select(0);
}
},
// ....
}
Example: https://fiddle.sencha.com/#fiddle/qe6

Listen to the store load event (as example in the controller):
onLaunch: function () {
var me = this,
grid = me.getGrid(),
store = me.getGroupsStore();
store.load({
callback: function(records, operation, success) {
grid.getSelectionModel().select(0);
},
scope: this
});
},

Multiple select checkbox is not returning values in Extjs 4.2 grid

I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).

Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();

You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!

List is not visible in Ext.Container even though I added layout and flex properties

Playing around with Sencha Touch 2.0 and have stumbled upon a problem. I want a list to show in my Ext.Container but nothing is happening.
My class (LoggedInView.js)
Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
layout: 'vbox',
items: [{
xtype: "toolbar",
docked: "top",
title: "Pågående anbud"
},{
xtype: 'list',
itemTpl: '{name}',
flex: 1,
store : 'Auction'
}]
}
});
My Store (Auction.js)
Ext.define('GS.store.Auction', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
fields: ['name'],
data: [
{name: 'test1'},
{name: 'test2'},
{name: 'test3'},
{name: 'test4'},
]
},
});
My application (app.js)
Ext.application({
name: 'GS',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'LoggedInView'],
stores: ['Auction'],
....etc...
What am I doing wrong here? I get the toolbar rendered correctly but the list is not showing.
EDIT
Alos attached my (main.js)
// The login button
var button = Ext.create('Ext.Button', {
text: 'Logga in',
minHeight: '45px',
handler: function (b, e) {
var form = Ext.getCmp('register');
form.submit({
url: 'URL HERE',
method: 'POST',
success: function (frm, res) {
var paneltab = Ext.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure: function (frm, res) {
alert('Form no submit!');
}
});
}
});
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
id: 'register',
frame:true,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'userName',
placeHolder : 'Användarnamn'
},
{
xtype: 'passwordfield',
name : 'password',
placeHolder : 'Lösenord'
}
]
},
{
xtype: 'container',
items: [button]
},
]
});

Add fullscreen: true to your view config
My class (LoggedInView.js)
Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
layout: 'vbox',
fullscreen: true,
items: [{
xtype: "toolbar",
docked: "top",
title: "Pågående anbud"
},{
xtype: 'list',
itemTpl: '{name}',
flex: 1,
store : 'Auction'
}]
}
});
Your code in senchafiddle: http://www.senchafiddle.com/#HcaOD
EDIT:
In your Main.js you don't define your Main View, so it can't be created in app.js
Reworked Main.js
Ext.define('GS.view.Main', {
extend : 'Ext.form.Panel',
config : {
fullscreen : true,
id : 'register',
frame : true,
items : [{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'userName',
placeHolder : 'Användarnamn'
}, {
xtype : 'passwordfield',
name : 'password',
placeHolder : 'Lösenord'
}]
}, {
xtype : 'button',
text : 'Logga in',
minHeight : '45px',
handler : function(b, e) {
var form = Ext.getCmp('register');
form.submit({
url : 'http://testurl.com',
method : 'POST',
success : function(frm, res) {
var paneltab = Ext
.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure : function(frm, res) {
alert('Form no submit!');
}
});
}
}]
}
});
A additional problem ist, that the post method doesn't work, because it's not submitted, so it alerts "Form no submit!". But when you put your success code in the failure function, the list is shown.
However i recommend you to put the button handler in a controller.
The button Code then look like this:
{
xtype : 'button',
text : 'Logga in',
minHeight : '45px',
action: 'submitFormAction'
}
Controller.js
Ext.define('GS.controller.Controller', {
extend : 'Ext.app.Controller',
config : {
control : {
'button[action="submitFormAction"]' : {
tap : 'submitForm'
},
}
},
submitForm : function() {
var form = Ext.getCmp('register');
form.submit({
url : 'http://testurl.com',
method : 'POST',
success : function(frm, res) {
var paneltab = Ext.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure : function(frm, res) {
alert('Form no submit!');
}
});
}
});
Then you must add the controller in your app.js with controllers:['Controller'],.
Working senchafiddle: http://www.senchafiddle.com/#HcaOD#pArtn

Ok, found the solution to this problem. It was my Main.js class that was not defined. Restructured the code some and voila!
Ext.define('GS.view.Main', {
extend: 'Ext.form.Panel',
config: {
fullscreen: true,
id: 'register',
frame:true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'userName',
placeHolder : 'Användarnamn'
},
{
xtype: 'passwordfield',
name : 'password',
placeHolder : 'Lösenord'
}
]
}, {
xtype: 'button',
text: 'Logga in',
minHeight: '45px',
handler: function (b, e) {
var form = Ext.getCmp('register');
form.submit({
url: 'MY URL HERE',
method: 'POST',
success: function (frm, res) {
var paneltab = Ext.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure: function (frm, res) {
alert('Form no submit!');
}
});
}
}]
}
});

Trouble with Sencha Touch MVC

I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!

In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}

I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.

Extjs Grid doesn't show any data

I created the following grid component:
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
});
}
});
The grid renders correctly, and the URL that is mapped to MyAppUrls.ListRelationshipMembers is correct. The data is being retrieved, and the ListRelationshipMembers URL is returning the following JSON:
{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}
Yet, even though the grid is rendered (columns, borders, etc..) no data is showing in the actual grid though. Since this is my first time using a data store, I am unsure of what I am doing wrong. Any help would be appreciative.
Edit:
I tried updating the store to have a reader via the following code:
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
No change, the datagrid is not being filled with the records

Evan is correct. Your biggest problem is a lack of a reader. That and the validation stub you left in there needed to return true. If you can't just drop this code in and have it work you have some other problem.
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
return true;
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
reader: new Ext.data.JsonReader({
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
})
});
}
});

Think you need to do a couple of things here: firstly, as mentioned by Evan, you need to add a reader to your store, like this:
buildStore: function () {
return new Ext.data.Store({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
})
});
}
I've changed the store type here to something simpler - was there a particular reason you were using GroupingStore? Note that the root is specified in the reader, not the store itself.
Then, in your columns, I'd tend to add a renderer to explicitly determine what each column will display, such as:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
I've got into the habit of using renderers, since I modify the content of my column cells quite heavily in my grids. Notice here the arguments being passed to the renderer function; there are a few more you can pass in - see the ExtJS API if you need more info on what you can actually access. On that note, the API documentation is pretty good - it can take some digging into but definitely worth your time if you're working with ExtJS a lot.

You haven't specified a reader on your store, you need to specify the root in the JsonReader.