How to default select a childnodes in extjs - extjs

I am having a breadcrumb toolbar where I have to display childnode default selected. I am using a treestore and root is what i am creating and then making an ajax call to get the childnodes. In my view I am default selecting a selection : pStore.getRoot().childNodes[2], its giving me null.
even pStore.getRoot().firstChild is giving null. Nor sure what i am missing.
Any help is appreciated.
Thanks!
Store
Ext.define('Online.store.Publications',
{
extend : 'Ext.data.TreeStore',
alias : 'store.Publications',
nodeParam : 'id',
autoLoad : true,
root : {
text : 'Pubs ►',
id : 'pub',
expanded : true,
iconCls : 'doc-folder',
leaf : false
},
rootVisible : false,
proxy : {
type : 'ajax',
noCache : false,
url : Online.getBaseURL()+'/nPub/getPublicationsJSON',
reader : {
type : 'json'
},
timeout : 60000,
}
}
});
View
Ext.define('Online.view.Breadcrumb', {
extend : 'Ext.toolbar.Toolbar',
xtype : 'navigation-toolbar',
id : 'navigation-toolbar',
requires : [
'Online.view.BreadcrumbController'
],
controller : 'breadcrumb',
reference : 'navigation-toolbar',
initComponent : function() {
var pStore = Ext.create('store.Publications');
));
Ext.apply(this, {
items : [
{
xtype : 'breadcrumb',
id : 'navigation-breadcrumb',
reference : 'breadcrumb',
useSplitButtons : false,
flex : 0.85,
showIcons : false,
useArrows : true,
bind : {
selection : '{id}'
},
store : pStore,
selection : pStore.getRoot(),
autoLoad : false,
rootVisible : fals
}
]
});
this.callParent();
}
});

Ext.define('Online.view.Breadcrumb', {
extend : 'Ext.toolbar.Toolbar',
xtype : 'navigation-toolbar',
id : 'navigation-toolbar',
requires : [
'Online.view.BreadcrumbController'
],
controller : 'breadcrumb',
reference : 'navigation-toolbar',
initComponent : function() {
var pStore = Ext.create('store.Publications');
var PChilds;
));
Ext.apply(this, {
items : [
{
xtype : 'breadcrumb',
id : 'navigation-breadcrumb',
reference : 'breadcrumb',
useSplitButtons : false,
flex : 0.85,
showIcons : false,
useArrows : true,
bind : {
selection : '{id}'
},
store : pStore,
selection :'',
autoLoad : false,
rootVisible : fals
}
]
});
***pStore.on('load', function(store, records) {
PChilds = pStore.getRootNode().childNodes[0]
var nodeObj = this.items.items[1];
nodeObj.setSelection(PChilds);
},this);***
this.callParent();
}
});

Related

Extjs 4.1.1: Grid to Tree drag drop not working

I want to achieve something like this :
http://jsfiddle.net/mgill21/3HJXX/2/
But I whenever I drop a node from grid into the treecolumn (as a leaf node) I get errors such as node.updateInfo() is undefined and other node related undefined method.
Here is my code:
Ext.namespace('Ext.ux.window.ConfigureMobileApp');
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
var firstGridStore = Ext.create('Ext.data.Store', {
storeId : 'formStore',
fields : [ 'name', 'type', 'itemId' ],
data : [ {
name : "Michael Scott",
itemId : 7,
type : "Management"
}, {
name : "Dwight Schrute",
itemId : 2,
type : "Sales"
}, {
name : "Jim Halpert",
itemId : 3,
type : "Sales"
}, {
name : "Kevin Malone",
itemId : 4,
type : "Accounting"
}, {
name : "Angela Martin",
itemId : 5,
type : "Accounting"
} ]
});
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
ddGroup : 'selDD'
}
},
store : Ext.data.StoreManager.lookup('formStore'),
columns : [ {
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
}, {
text : "Type",
width : 70,
sortable : true,
dataIndex : 'type'
} ],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0',
width : 200
});
Ext.define('Resource', {
extend : 'Ext.data.Model',
fields : [ {
name : "name",
type : "string"
}, {
name : "type",
type : "string"
} ]
});
var store1 = Ext.create('Ext.data.TreeStore', {
storeId : 'treeStore',
fields : [ 'name', 'type', 'itemId' ],
root : {
expanded : true,
children : [ {
itemId : 171,
type : "comedy",
name : "Mr Bean",
children : [ {
leaf : true,
itemId : 171,
type : "actor",
name : "Rowan Atkinson"
} ],
}, {
itemId : 11,
type : "fantasy",
name : "Harry Potter",
children : [ {
itemId : 11,
leaf : true,
type : "actress",
name : "Emma Watson",
} ]
}, {
itemId : 173,
type : "Action",
name : "Fast and Furious",
children : [ {
itemId : 174,
type : "actor",
name : "Dwayne Johnson",
children : [ {
leaf : true,
itemId : 175,
type : "wrestler",
name : "The Rock"
} ]
} ]
} ]
}
});
Ext.define('Ext.ux.window.TreeGrid', {
extend : 'Ext.tree.Panel',
title : 'Demo',
height : 300,
rootVisible : true,
singleExpand : true,
store : Ext.data.StoreManager.lookup('treeStore'),
columns : [ {
xtype : 'treecolumn',
text : 'Name',
dataIndex : 'name',
width : 200
}, {
text : 'Type',
dataIndex : 'type'
} ],
initComponent : function() {
this.callParent();
},
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop',
ddGroup : 'selDD'
},
listeners : {
beforedrop : function(node, data) {
debugger;
data.records[0].set('leaf', true);
data.records[0].set('expanded', false);
data.records[0].set('checked', true);
},
drop : function(node, data, dropRec, dropPosition) {
// firstGridStore.store.remove(data.records[0]);
}
}
}
});
var secondTree = Ext.create('Ext.ux.window.TreeGrid');
Ext.define('Ext.ux.window.ConfigureMobileApp', {
extend : 'Ext.window.Window',
title : 'Configure Mobile App',
height : 600,
width : 600,
layout : 'hbox',
modal : true,
closeAction : 'hide',
items : [ firstGrid, secondTree ]
});
Please help. Stuck since a very long time.
To help u out with this error i m sending u two links .These are not the proper solution but will surely guide u a way for that.
First Link
Second Link

Multiple Stores Loading Issue Sencha Touch

I have two Stores 'Polls' and 'Choices' with respective models as 'Poll' and 'Choice'
models
Poll
Ext.define('PollsTest.model.Poll', {
extend: 'Ext.data.Model',
xtype : 'poll',
config: {
fields: [
{ name: 'title'},
{ name: 'uri' },
],
hasMany :
[
{
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices'
}
]
}
});
Choice
Ext.define('PollsTest.model.Choice', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'choice', type: 'auto' },
{ name: 'votes', type: 'auto' },
{name : 'title', type: 'auto'},
{name : 'uri', type : 'auto'}
],
belongsTo : {
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices',
getterName: 'getChoices',
setterName: 'setChoices'
}
}
});
Stores
Polls
Ext.define('PollsTest.store.Polls',{
extend : 'Ext.data.Store',
alias : 'store.pollStore',
//xtype:'pollStore',
requires :
[
'PollsTest.model.Poll',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config :
{
autoLoad : true,
model : 'PollsTest.model.Poll',
storeId :'pollStore',
listeners :
{
load : function(store, records)
{
console.log('store loaded',records);
}
},
//storeId : 'pollstore',
proxy :
{
type : 'jsonp',
url : 'http://localhost/polls',
reader :
{
type : 'json',
rootProperty : 'polls'
}
}
},
});
Choices
Ext.define('PollsTest.store.Choices',{
extend : 'Ext.data.Store',
alias : 'store.choiceStore',
requires :
[
'PollsTest.model.Choice'
],
config :
{
autoLoad : false,
model : 'PollsTest.model.Choice',
storeId :'choiceStore',
listeners :
{
load : function(store, records)
{
console.log('choice store loaded',records);
}
},
proxy :
{
type : 'jsonp',
url : '',
reader :
{
type: 'json',
rootProperty : 'choices'
}
}
},
});
So from Polls store I can populate my List and upon clicking the list item the controller pushes the detail panel to the view. The Choices Store will populate based on the tap event occurred on the list. So the problem is I have to push the details panel to the view only after loading the Choices Store
How can I do that?? Suggestions are appreciated.
and My controller will look like this
Ext.define('PollsTest.controller.MainController', {
extend: 'Ext.app.Controller',
requires : ['PollsTest.controller.ChoiceController'],
config: {
refs: {
mainController : 'mainpanel',
controller_list : 'pollslist',
details_controller : 'pollsdetails'
},
control: {
controller_list :
{
itemtap : 'ShowPoll'
},
}
},
ShowPoll : function (list, index, target, record, e, eOpts)
{
var tochoice = record.data.uri;
var main_path = 'http://localhost';
var choices_url = main_path+tochoice;
var choice_store_object = Ext.getStore('choiceStore');
choice_store_object.getProxy().setUrl(choices_url);
choice_store_object.load();
console.log(choice_store_object.getCount());
/* var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking = choices_store_object.on('load',function(){return true;});
if(checking==true) --> didn't work no detail panel pushing is happening but the order of loading the stores works fine here.
{
*/ console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
// }
//this.getApplication().getController('ChoiceController').onDetailsShow(this,record,tochoice);
}
});
You can pass a callback function in your choice store load function. The callback function will be executed after the store has loaded.
choice_store_object.load(function(records, operation, success) {
// push the pollsdetails view here
}, this);
This is how I `i have implemented
var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking =choice_store_object.load(function(records, operation, success)
{
console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
}, this);
`

How to display name/value pairs into a Ext.grid.Panel from a Ext.data.Store

Here is the store :
Ext.define( 'LFinanceCRM.store.Prospect', {
extend : 'Ext.data.Store',
buffered : false,
autoLoad : true,
remoteFilter : true,
storeId : 'prospect-store',
proxy : {
type : 'ajax',
url : 'services/getProspect.php',
filterParam : undefined,
limitParam : undefined,
startParam : undefined,
pageParam : undefined,
idParam : 'id',
reader : {
type : 'json',
root : 'prospect'
}
},
fields : [
{ name : 'id' },
{ name : 'value' }
],
constructor : function(){
this.callParent( arguments );
console.log( 'new ' + this.self.getName());
}
});
Here is the PHP code:
<?php
include_once 'db.php';
header( "Content-type: application/json; charset=utf-8" );
$id = #mysql_real_escape_string($_GET['id']);
$link = db_open();
$query = "SELECT name, value FROM Pairs WHERE id = '$id'";
$result = #mysql_query( $query, $link );
$pairs = array();
if( $result ) {
while( $row = mysql_fetch_assoc( $result )) {
$item = Array();
$item['id' ] = $row['name' ];
$item['value'] = $row['value'];
$pairs[] = $item;
}
}
$response = array( 'prospect' => $pairs );
print json_encode( $response );
#mysql_free_result( $result );
#mysql_close( $link );
?>
Here is the JSON received from PHP:
{prospect:[
{id:'aaa',value:'vvvv'},
{id:'bbb',value:'vvvv'},
...
{id:'yyy',value:'vvvv'},
{id:'zzz',value:'vvvv'},
}]
Here is the view:
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
requires :[],
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : Ext.data.StoreManager.lookup( 'prospect-store' ),
columns : [{
text : 'Nom',
dataIndex : 'name',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
I use the MVC pattern supported by Sencha app build tool, here is the controller:
Ext.define( 'LFinanceCRM.controller.Main', {
extend : 'Ext.app.Controller',
id : 'theController',
onNonLuesSelectionChanged : function( panel, selected, eOpts ) {
console.log('onNonLuesSelectionChanged: ' + selected[0].data.id );
this.getStore('Prospect').load({
id : selected[0].data.id,
callback : function( records, operation, success ) {
var pairs = [];
for( var i = 0; i < records.length; ++i ) {
pairs.push( records[i].data );
}
Ext.ComponentQuery.query('client-view')[0].getForm().setValues( pairs );
Ext.ComponentQuery.query('immo-view' )[0].getForm().setValues( pairs );
}
});
},
onSavePairs : function() {
console.log('onSavePairs');
},
...
onMail : function() {
console.log('onMail');
},
...
stores : ['Prospect'],
constructor : function(){
this.callParent( arguments );
console.log( 'new ' + this.self.getName());
this.control({
'#ProspectsTableNonLues' : { selectionchange : this.onNonLuesSelectionChanged },
...
'#savePairsButton' : { click : this.onSavePairs },
...
'#mail' : { click : this.onMail },
});
}
});
Nothing is displayed yet!
My question is : how can I transform the data from store to feed the view with them?
Your LFinanceCRM.view.RawDataView config is not properly defined.
You should create an instance of Store to assign to the grid panel -
store : Ext.data.StoreManager.lookup( 'prospect-store' ),
should be changed to
store : Ext.create("LFinanceCRM.store.Prospect"),
Also in columns config, dataIndex should be "id" for the first column instead of "name"
{
text : 'Nom',
dataIndex : 'name',
sortable : false,
width : 200
}
should be changed to
{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : 200
}
Replace your LFinanceCRM.view.RawDataView code with this -
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : Ext.create("LFinanceCRM.store.Prospect"),
columns : [{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : 200
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : 200
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
To avoid double request to the server and some other reasons, I prefer share the instance of the store betweens several views.
As pointed out by Prasad K, a mistake between name and id must be corrected.
As pointed in the documentation of Sencha Extjs4.2.2, when a store is instantiated by a controller, its id is the name of its class, even an id is set (bug?).
So the code becomes:
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : 'Prospect',
columns : [{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
And it works!

Ext.plugin.ListPaging - common 'load more...' issue

I'm dealing with the following problem, I got the below code:
VIEW:
Ext.define('aBMin.view.Email', {
extend : 'Ext.Panel',
alias : 'widget.email-panel',
config : {
layout : "fit",
items : [{
xtype : 'toolbar',
ui : 'light',
layout : 'hbox',
docked : 'top',
items : [{
xtype : 'searchfield',
name : 'emailsearch',
width: '45%',
flex : 1
}, {
xtype : 'selectfield',
flex : 2,
name : 'emailassign',
value : 'unassigned',
options : [{
text : 'All',
value : 'all'
}, {
text : 'Assigned',
value : 'assigned'
}, {
text : 'Unassigned',
value : 'unassigned'
}]
}]
}, {
xtype : 'list',
action : 'readEmail',
itemTpl : '<tpl for="."><div class="list-pos-row"><div class="list-pos-col">{emailsubject}</div></div><div class="list-pos-row"><div class="list-pos-col list-email-date">{emaildate}</div></div><div class="list-pos-row"><div class="list-pos-col list-email-from">{emailfrom}</div></div></tpl>',
itemSelector : 'div.contact',
emptyText : 'No data found.',
onItemDisclosure : true,
store : 'Email',
plugins : [{
xclass : 'Ext.plugin.ListPaging',
autoPaging : true,
noMoreRecordsText: 'No More Records'
}],
}]
}
});
STORE:
Ext.define('aBMin.store.Email', {
extend : 'Ext.data.Store',
requires : ['aBMin.model.Email'],
config : {
autoLoad : true,
model : 'aBMin.model.Email',
remoteFilter : true,
proxy : {
type : 'direct',
extraParams : {
filter : 'unassigned'
},
directFn : ClientemailTable.getListMobile,
config : {
paramsAsHash : true,
reader : {
type : 'json',
rootProperty : 'records'
,totalCount: 'totalCount'
}
}
}
}
});
MODEL
Ext.define('aBMin.model.Email', {
extend : 'Ext.data.Model',
config : {
fields : [{
name : 'clientemailid',
type : 'int'
}, {
name : 'clientid',
type : 'int'
},{
name : 'emailsubject',
type : 'string'
}, {
name : 'emailfrom',
type : 'string'
}, {
name : 'emailbody',
type : 'string'
}, {
name : 'supportstaffid',
type : 'int'
}, {
name : 'ticketid',
type : 'int'
}, {
name : 'emaildate',
type : 'string'
}, {
name : 'isassigned',
type : 'int'
}, {
name : 'newemailnote',
type : 'string'
}],
idProperty : 'clientemailid',
proxy : {
type : 'direct',
reader : {
type : 'json'
},
api : {
read : Clientemail.readMobile,
update : Clientemail.updateMobile
}
}
}
});
now... my service returns the following JSON response:
it's returned when the app send for ex. a request with a below like params:
and still... the 'load more', won't disapear.
So I guess what I'm trying to achieve is to get rid the 'load more...' button when the store is fully loaded. I've read few other topics on StackOverflow but didn't solve the thing.
Any comments / hins appreciated.
Key should be totalProperty in reader configuration, not totalCount.
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.reader.Reader

TreePanel Error : Uncaught TypeError: Cannot call method 'substring' of undefined

I've a problem while rendering TreePanel. I'm using MVC structure, here's my definition:
(By the way I don't use dynamic loading, included ext-all-debug.)
Menu - Model
Ext.define('RIA4.model.Menu', { extend : 'Ext.data.Model',
idProperty : 'menuId',
fields : [
{ name : 'menuId', type : 'int' },
{ name : 'menuName', type : 'string' },
{ name : 'sourcePath', type : 'string' },
{ name : 'active', type : 'boolean', defaultValue : true },
{ name : 'leaf', type : 'boolean' }
]
});
TreeStore
Ext.define('RIA4.store.Menus', { extend : 'Ext.data.TreeStore',
model : 'RIA4.model.Menu',
proxy : {
type : 'ajax',
api : {
read : 'menu/view.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success'
}
},
autoLoad : true
});
TreePanel
Ext.define('RIA4.view.menu.MenuTree', { extend : 'Ext.tree.Panel',
alias : 'widget.menutree',
//requires : [],
title : 'Menu List',
store : 'Menus',
rootVisible : false,
root : {expanded: true, text: "", "data": []}
});
I'll be happy if someone can help me?
Thanks in advance..
Haven't you forgotten to add the following line to controller's config:
views: [ 'menu.MenuTree' ],

Resources