when I am trying to combine different components(dropdown,grid,buttons etc) in an window(Ext.Window), grid is not being displayed. Following is the code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Super User Access Management</title>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('SuperUser', {
extend: 'Ext.data.Model',
fields: [
{ name: 'fname', type: 'string' },
{ name: 'lname', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'isSup', type: 'boolean' },
{ name: 'upDate', type: 'string' },
{ name: 'upBy', type: 'string' }
]
});
var win=new Ext.Window({
title: 'Super User Access Management',
border:false,
items : [
{
xtype : 'combo',
fieldLabel : 'Module',
value: 'Super Admin' ,
store: ['Super Admin', 'Partner Contact Management', 'Partner Trainning Management'],
listeners: {
select: function(){
alert('Hello module!');
}
}
},
{
xtype: 'gridpanel',
border: false,
store: Ext.create('Ext.data.Store', {
storeId: 'supUserStore',
pageSize: 3,
model:'SuperUser',
data: [
{ fname: 'Jane',lname:'Smith',email: 'j.smith#netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith#netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith#netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith#netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith#netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith#netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith#netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith#netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith#netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron#netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith#netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron#netapp.com'}
],
proxy: { type: 'memory', reader: { type: 'json', root: 'data',totalProperty:10} }
}),
selModel: Ext.create('Ext.selection.CheckboxModel'),
columns: [
{ header: 'First Name', dataIndex: 'fname' },
{ header: 'Last Name', dataIndex: 'lname' },
{ header: 'Email', dataIndex: 'email' },
{ header: 'User ID', dataIndex: 'uid' },
{ header: 'Super Admin', dataIndex: 'isSup' },
{ header: 'Updated Date', dataIndex: 'upDate' },
{ header: 'Updated By', dataIndex: 'upBy' }
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('supUserStore'),
dock: 'bottom',
displayInfo: true
}],
initComponent: function () {
this.callParent(arguments);
}
}
]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
please please let me know, where I am doing wrong.Or let me know, How can i combine different components in EXTJS. I dont want to render different component in div tag in html body.
Remove the initComponent method in your grid config. If you need to override existing methods, use Ext.define to make a subclass so that callParent works as intended.
A couple of comments about your code (not related to your problem):
Creating your store and referring to it in the same config object is iffy. You should create the store outside of the config and use store: "supUserStore" instead of doing the StoreManager lookup yourself.
The header property on grid columns has been deprecated for a while. The preferred property is called text.
Instead of calling win.show() after creating the window, you can use the autoShow: true config.
Related
I have two combobox, values are coming from database i am using json to populate the same. Second combo gets populated when the first combo changes. First time when we set the value of the first combo it works like magic. But second time, it does not get bind. and throws an error
This is my running code:
<script type="text/javascript">
Ext.onReady(function() {
var serverStore = Ext.create('Ext.data.Store', {
storeId: 'serverStore',
fields: [
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
sqlQuery: 'select distinct(u_hostname) from SCRIPT_SCHEDULE'
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsStore = Ext.create('Ext.data.Store', {
storeId: 'dpsStore',
fields: [
{
name: 'u_username',
mapping: 'u_username',
type: 'string'
},
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsCombo = Ext.create('Ext.form.ComboBox',{
id: 'dpsCombo',
fieldLabel: 'Username',
hidden: false,
margin: '5 0 0 25',
queryMode: 'local',
valueField: 'u_username',
displayField: 'u_username'
});
var serverCombo = Ext.create('Ext.form.ComboBox',{
id: 'serverCombo',
fieldLabel: 'Server Name',
hidden: false,
margin: '5 0 0 25',
store: serverStore,
queryMode: 'local',
valueField: 'u_hostname',
displayField: 'u_hostname',
listeners: {
change: changeStore
}
});
function changeStore(combo, value){
var store;
store = dpsStore;
var combobox = Ext.getCmp('dpsCombo');
combobox.clearValue();
console.log(value);
store.getProxy().setExtraParam("sqlQuery", `select distinct(u_username) from SCRIPT_SCHEDULE where u_hostname ='${value}'`);
console.log(value);
combobox.bindStore(store);
store.load();
}
Ext.create('Ext.container.Viewport', {
id: 'processviewport',
layout: 'border',
items: [{
xtype: 'panel',
id: 'filterPanel',
layout: 'hbox',
title: 'Data filter',
region: 'north',
collapsible: true,
items: [{
xtype: 'panel',
layout: 'hbox',
flex: 2,
items:[
{
xtype: 'panel',
layout: 'vbox',
items: [
serverCombo,
dpsCombo
]
}]
}]
}]
});
});
</script>
Error :
Uncaught TypeError: Cannot read property 'call' of undefined
The issue the combobox was not rendering data on the second change was resolved by adding lastQuery: field in the second combo.
I am trying to get some master data from server in JSON format and bind it to selectfield with the help of Store.
Find my code below
Model
Ext.define('Mobile.model.OrganizationModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'Name', type: 'string' },
{ name: 'Id', type: 'int' }
]
}
});
Store
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
});
View
Ext.define("Mobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.login",
id: 'loginFormPanel',
config: {
margin: '0 auto',
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'something',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
xtype: 'selectfield',
label: 'Organization',
name: 'Organization',
store: 'OrganizationStore',
displayField: 'Name',
valueField: 'Id',
placeHolder: 'Select a Value'
}
]
},
]
}
});
APP.js
Ext.application({
name: "Mobile",
controllers: ["LoginController"],
views: ['LoginView', 'HomeView'],
models: ['UserModel', 'OrganizationModel'],
stores: ['OrganizationStore'],
launch: function () {
var loginPanel = Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'login'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
JSON Data format is
[{"Id":1,"Name":"Company 1"},{"Id":2,"Name":"Company 2"},{"Id":3,"Name":"Company 3"}]
The problem is it is not sending request to server and loading JSON data and binds. Any idea about this issue?
update you store code to
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
config:{
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
}
});
I am creating login system with Sencha Touch 2. I am getting an issue while submitting my form. It is not getting response data from server. Below is my code
Controller:
Ext.define("MyMobile.controller.LoginController", {
extend: "Ext.app.Controller",
views: ['LoginView'],
config: {
refs: {
loginForm: "#loginFormPanel"
},
control: {
'button[action=login]': {
tap: "authenticateUser"
}
}
},
authenticateUser: function (button) {
this.getLoginForm().submit({
url: 'login/authenticate',
method: 'POST',
success: function (form, result) {
debugger; //This block of code is not executing even after JSON response
var jsonoutput = Ext.decode(result); // json parsing
Ext.MessageBox.alert('Error', "Success");
},
failure: function (form, result) {//This block of code is not executing even after JSON response
Ext.MessageBox.alert('Error', "Invalid username/password");
}
});
}
});
View
Ext.define("MyMobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.mylogin",
id: 'loginFormPanel',
config: {
margin: '0 auto',
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'Login',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
xtype: 'textfield',
label: 'User Name',
name: 'my-username',
required: true,
placeHolder: 'Username'
},
{
xtype: 'emailfield',
label: 'Email',
name: 'Email'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'my-password',
required: true,
placeHolder: 'Password'
}
]
},
{
xtype: 'button',
id: 'loginButton',
margin: '25 auto 0 auto ',
style: '',
maxWidth: 200,
ui: 'action',
width: '',
iconCls: 'user',
iconMask: true,
text: 'Login',
action: 'login'
}
]
}
});
App.JS
Ext.application({
name: "MyMobile",
appFolder: "myapp",
controllers: ["LoginController"],
views: ['LoginView'],
launch: function () {
var loginPanel= Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'mylogin'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
Can some one could figure out what should be the problem?
Below was the JSON response i am getting from server.
{"UserName":"Murali","isAdmin":true,"isAuthenticated":true}
Even after getting a JSON and 200 ok result, my code form submit function goes into failure callback. In failure call back function failure:function(form,result) i am getting result param as my JSON. But why it is in failure?
Make your server return a JSON response like below:
If success:
{
"success":true,
"UserName":"Murali",
"isAdmin":true,
"isAuthenticated":true
}
If failure:
{
"success":false
}
Read more here: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-submit
I'm just learning sencha touch 2, MVC. I would to make a simple form that get a value, pass to a PHP file (for an API call to a web-service), move to a Nested List and show results.
But, my app doesn't show nothing after submit... Value is captured correctly (I see it in console log).
Please someone could me help?
Consider for testing that for now I don't pass value, and my API call calls directly with a hard-coded value. In future I'll work to pass form value...
Thank you in advance!
This is "app.js"
Ext.application({
name: 'Appre',
icon: 'resources/icons/icon.png',
phoneStartupScreen: 'resources/images/phone_startup.png',
//tabletStartupScreen: 'tablet_startup.png',
glossOnIcon: false,
//profiles: ['Phone', 'Tablet'],
views : ['Viewport','SearchCap','ElencoRistoranti'],
models: ['ElencoRistoranti'],
stores: ['RistorantiCap'],
controllers: ['SearchCap'],
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
},
launch: function() {
Ext.create('Appre.view.Viewport')
} // launch: function() {
}) // Ext.application
This is form "search cap"
Ext.define('Appre.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
config: {
items: [{
xtype: 'fieldset',
layout: 'vbox',
items: [{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
action :'searchCap',
id:'btnSubmitLogin'
}] // items
}] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
This is controller
Ext.define('Appre.controller.SearchCap', {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
var $this=this;
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.php',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
//Ext.Msg.alert('Contact Complete!', obj.responseText);
$this.resetForm();
Ext.Viewport.add(Ext.create('Appre.view.ElencoRistoranti'));
Ext.Viewport.setActiveItem(Ext.create('Appre.view.ElencoRistoranti'));
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
And this is Nested List
Ext.define('Appre.view.ElencoRistoranti', {
extend: 'Ext.Panel',
xtype: 'appre-elencoristoranti',
config: {
xtype: 'nestedlist',
title: 'Cap',
displayField: 'name',
store: {
type: 'tree',
fields: [
'id_restaurant', 'name',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'ajax',
url: 'cerca-ristoranti-cap.php',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
} // proxy
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('name'));
}
}
} // config
});
cerca-ristoranti-cap.php it's a simple function that returns an array like this:
{
"restaurants":[{
"id_restaurant":"40",
"name":"La Saliera",
"zip":"00128",
"lat":"41.7900229",
"lgt":"12.4513128"
}, {
"id_restaurant":"64",
"name":"Osteria del Borgo",
"zip":"00128",
"lat":"41.7887363",
"lgt":"12.5149867"
}]
}
Hi #sineverba sorry for response a little late, but here something this how you want show,
Viewport.js
Ext.define('myapp.view.Viewport' , {
extend : 'Ext.viewport.Default',
xtype : "viewport",
config: {
fullscreen: true,
styleHtmlContent: true,
style: 'background:#ffffff;',
layout : 'card',
autoDestroy : false,
cardSwitchAnimation : 'slide',
items: [
{
xtype: 'appre-searchCap'
},
],
}
})
app.js
Ext.Loader.setConfig({
enabled: true
})
Ext.application({
name: 'myapp',
requires: [
'myapp.view.SearchCap',
'myapp.view.ElencoRistoranti',
'myapp.view.SearchElenco',
],
controllers: ['SearchCap'],
models: ['myapp.model.SearchCapModel'],
launch: function() {
Ext.create('myapp.view.Viewport')
}
});
SearchCapModel.js
Ext.define('myapp.model.SearchCapModel', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id_restaurant',
fields: [
{ name: 'id_restaurant', type: 'string' },
{ name: 'name', type: 'string'},
{ name: 'zip', type: 'string' },
{ name: 'lat', type: 'string'},
{ name: 'lgt', type: 'string'}
],
}
})
SearchCapStore.js
Ext.define('myapp.store.SearchCapStore', {
extend: 'Ext.data.Store',
config: {
model: 'myapp.model.SearchCapModel',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'cerca-ristoranti-cap.json',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
},
}
});
SearchCap.js
Ext.define('myapp.controller.SearchCap', {
extend : "Ext.app.Controller",
views: ['SearchElenco'],
config : {
refs : {
elencoListContainer: 'elencolistcontainer',
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap',
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.json',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = response.responseText;
Ext.Msg.alert('Contact Complete!', obj);
Ext.Viewport.add(Ext.create('myapp.view.SearchElenco'));
Ext.Viewport.setActiveItem(1);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
SearchElenco.js
Ext.define('myapp.view.SearchElenco', {
extend: 'Ext.Container',
xtype: 'elencolistcontainer',
requires: ['myapp.store.SearchCapStore'],
initialize: function() {
this.callParent(arguments);
var s = Ext.create('myapp.store.SearchCapStore')
var notesList = {
xtype: 'appre-elencoristoranti',
store: Ext.getStore(s).setAutoLoad(true),
listeners: {
disclose: {
fn: this.onNotesListDisclose,
scope: this
}
}
};
this.add([notesList])
},
onNotesListDisclose: function(list, record, target, index, event, options) {
console.log('editNoteCommand');
this.fireEvent('editNoteCommand', this, record);
},
config: {
layout: {
type: 'fit'
}
}
});
ElencoRistoranti.js
Ext.define('myapp.view.ElencoRistoranti', {
extend: 'Ext.dataview.List',
xtype: 'appre-elencoristoranti',
id: 'appreElenco',
config: {
emptyText: '<pre><div class="notes-list-empty-text">No list found.</div></pre>',
onItemDisclosure: false,
itemTpl: '<pre><div class="list-item-title">{id_restaurant}</div><div class="list-item-narrative">{name}</div></pre>',
}
});
SearchCap.js - View
Ext.define('myapp.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
id: 'appreSearchCap',
config: {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'fieldset',
title: 'Cap',
instructions: 'Enter Cap',
items: [
{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
ui: 'confirm',
action :'searchCap',
id:'btnSubmitLogin'
}
] // items
}
] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
I hope help you and if you have a dude please let me know. :)
I am developing an Android 2.3.3 app using PhoneGap and Sencha Touch 2 ...
I have an Login view from which i redirect to nested list view in my app ... I used an inline store for the nested list and i defined the type as 'tree' for the store ...
The first time i am trying to load the app and when i click on Login it is giving me an error ... The error is stated below :
Uncaught TypeError: Object [object Object] has no method 'getRootNode' at file:///android_asset/www/sencha/sencha-touch-all.js:15
But after getting the error if i force close the app and open it again everything is working fine ...
My code is :
Login.js
Ext.define("DDLApp.view.Login", {
//extent panel class
extend: "Ext.form.Panel",
//DOM in fieldset
requires: "Ext.form.FieldSet",
xtype: 'formLogin',
id:'loginForm',
config: {
scrollable: 'vertical',
id: 'login',
items: [
{
xtype: "toolbar",
docked: "top",
},
{
xtype: "toolbar", //Toolbar with heading as login
docked: "top",
title: "Login",
ui:'light',
id:"idHeaderTwo",
cls:"clsLoginHeader"
},
{
xtype: 'textfield', //textfield for username
name: 'Username',
required: true,
id:"idUserName",
cls:"clsUserName",
useClearIcon: false
},
{
xtype: 'passwordfield', //textfield for password
name: 'password',
required: true,
id:"idPassword",
cls:"clsPassword",
useClearIcon: false
},
{
xtype: 'button', //Login button
text: 'Login',
ui: 'confirm',
cls:'btnLogin',
width:'30%',
handler: function(SuccessFlag) { //Login button handler
ui: 'confirm',
console.log('Login Button pressed');
var form = Ext.getCmp('login');
//get username and password from form elements
var user = form.getValues().Username;
var pwd = form.getValues().password;
var msg = new Ext.MessageBox();
onLoad();
if(user == "" || pwd == "")
{
var errMsg = '';
if(user == "")
{
errMsg+= 'Username is required<br/>';
}
if(pwd == "")
{
errMsg+= 'Password is required';
}
msg.show({
title: 'LOGIN ERROR',
message: errMsg,
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
}
else
{
form.setMasked({
xtype:'loadmask',
message:'Loading...'
});
//Check for network connectivity
if(onDeviceReady())
{
//Fire a json service
Ext.util.JSONP.request({
url: DDLApp.app.oneTimeServiceUrl,
dataType: "jsonp",
params: {
type:'fetch',
username:user,
password:pwd
},
success: function (result) {
//if username and password matches
if(result.Success == true)
{
//setLocalStorage(result);
localStorage.setItem('userName',user);
localStorage.setItem('userPassword',pwd);
localStorage.setItem('totalData',JSON.stringify(result.Data));
localStorage.setItem('userData',JSON.stringify(result.Data.user));
localStorage.setItem('userIncidentData',JSON.stringify(result.Data.incidentList));
localStorage.setItem('impactData',JSON.stringify(result.Data.impact));
localStorage.setItem('incidentTypeData',JSON.stringify(result.Data.incident_type));
localStorage.setItem('categoryData',JSON.stringify(result.Data.category));
localStorage.setItem('statusData',JSON.stringify(result.Data.statusDropdown));
var indexPanel = Ext.create('DDLApp.view.Main');
Ext.Viewport.add(indexPanel);
Ext.Viewport.setActiveItem(indexPanel,{type: 'slide', direction: 'right'});
form.unmask();
}
else{
msg.show({
title: 'LOGIN ERROR',
message: 'Invalid Username/Password',
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
form.unmask();
}
}
});
}
////If network is not present
else
{
form.unmask();
msg.show({
title: 'NETWORK CONNECTION ERROR',
message: "We're Sorry but it appears your device is not connected to the internet . Please check your internet settings and try again.",
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'Retry',itemId:'retry'}],
fn:function(){
window.location.reload();
}
});
}
}
},
},
{
xtype: 'button', //clear button
text: 'Clear',
width:'30%',
ui: 'confirm',
cls:'btnClear',
style: 'background:#4A4245;',
handler: function() {
this.up('formpanel').reset(); //reset all form elements
},
}
]
},
});
IncidentsList.js
Ext.define("DDLApp.view.IncidentsList", {
extend: "Ext.Container",
xtype: 'incidentsList',
id: 'idIncList',
requires:[
'Ext.dataview.NestedList',
'Ext.data.proxy.Memory',
'Ext.data.TreeStore',
],
alias:'widget.incidentslist',
config: {
id: 'idIncidentList',
layout:'fit',
items: [
{
xtype: "toolbar",
docked: "top",
cls:'clsDDLHeader',
items: [
{xtype:'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentsListTitle',
title:"Welcome",
},
]
},
{
xtype: "toolbar",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo" ,
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "My Incidents",
},
{xtype:'spacer'}
]
},
{
xtype: 'nestedlist',
id:'idIncidentList',
onItemDisclosure:true,
cls:'clsNestedIncidentList',
toolbar:{id:'idNestedIncidentList'},
loadingText: "Loading Incidents...",
emptyText: "<div class=\"empty-text\">No Incidents Found.</div>",
getItemTextTpl: function() {
var tplConstructor =
'<tpl if="TKT_STATUS_NAME == \'CLOSED\'">'+
'<div class="vm_statusRed">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'OPENED\'">'+
'<div class="vm_statusYellow">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'ASSIGNED\'">'+
'<div class="vm_statusGreen">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'PENDING\'">'+
'<div class="vm_statusRed">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'RESOLVED\'">'+
'<div class="vm_statusOrange">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'REOPEN\'">'+
'<div class="vm_statusYellow">'+
'</tpl>'+
'<div class="vm_dvList"><h4 class="vm_txtName"><span class="vm_listHeader"><label>Inci.#{TKT_ID} by </label><label class="vm_txtFirstName"><i>{FIRST_NAME:ellipsis(15, true)}</i></label></span><div class="date vm_clsDate">{CREATED_ON:date("d-M-y H:i")}</div></h4>'+
'<div class="vm_title">{TKT_SUBJECT}</div>'+
'<div class="vm_subDesc">{TKT_DESC}</div></div></div>';
return tplConstructor;
},
store: {
type: 'tree',
fields: ['TKT_ID', 'CREATED_ON', 'FIRST_NAME', 'TKT_STATUS_NAME', 'TKT_SUBJECT', 'TKT_DESC', 'SEV_DESC', 'SERVICE_NAME', 'CATEGORY_NAME', {
name: 'leaf',
defaultValue: true
}],
root: {
leaf: false
},
data : localStorage.userIncidentData,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'incidentList'
}
}
},
detailCard: {
xtype: "fieldset",
scrollable: true,
id: "idIncidentDetails",
items: [
{
xtype: 'textfield',
name: 'TKT_SUBJECT',
label: 'Subject',
labelAlign: 'top',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textareafield',
name: 'TKT_DESC',
label: 'Description',
labelAlign: 'top',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SEV_DESC',
label: 'Impact',
labelWidth:'45%',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SERVICE_NAME',
id:'displayIncident',
cls:'vm_textFields',
label: 'IncidentType',
labelWidth:'45%',
disabled:true
},
{
xtype: 'textfield',
label: 'Category',
name: 'CATEGORY_NAME',
cls:'vm_textFields',
id:'getCategory',
labelWidth:'45%',
disabled:true
},
],
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().items.items[0].setHtml(post._data.TKT_SUBJECT);
this.getDetailCard().items.items[1].setHtml(post._data.TKT_DESC);
this.getDetailCard().items.items[2].setHtml(post._data.SEV_DESC);
this.getDetailCard().items.items[3].setHtml(post._data.SERVICE_NAME);
this.getDetailCard().items.items[4].setHtml(post._data.CATEGORY_NAME);
}
}
},
{html:'No Incidents Found....',id:'idEmptyText'}],
},
initialize: function() {
this.callParent(arguments);
var incidentStore = Ext.getCmp('idIncidentList').getStore();
Ext.getCmp("idEmptyText").hide();
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
var getIncidentData = localStorage.getItem('userIncidentData');
var parseIncidentData = JSON.parse(getIncidentData);
this.down("#idIncidentsListTitle").setTitle("Welcome, " + fname);
if(localStorage.userIncidentData != '[""]')
{
Ext.getCmp("idEmptyText").hide();
incidentStore.setData(localStorage.userIncidentData).load();
}
else
{
this.down("#inclist").hide();
this.down("#idEmptyText").show();
var msg = new Ext.MessageBox();
msg.show({
title: 'NO INCIDENTS FOUND',
message: 'No Incidents have reported by this user',
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
}
},
});
I need to get rid of this error as soon as possible ... Everything in my app is working fine from the second time onwards ... I think the problem is with the store i have defined ... Please help me guys ... Thanks in Advance ...!!!
My store is defined inline in my IncidentList View itself ...
store: {
type: 'tree',
fields: ['TKT_ID', 'CREATED_ON', 'FIRST_NAME', 'TKT_STATUS_NAME', 'TKT_SUBJECT', 'TKT_DESC', 'SEV_DESC', 'SERVICE_NAME', 'CATEGORY_NAME', {
name: 'leaf',
defaultValue: true
}],
root: {
leaf: false
},
data : localStorage.userIncidentData,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'incidentList'
}
}
},
This is true: Object [object Object] has no method getRootNode
This method is no longer available in ST2, take a look at the API docs.
Actually, this is the only place in ST code that has this method left. Try editing sencha code in TreeStore
removeAll: function() {
this.getRootNode().removeAll(true);
this.callParent(arguments);
},
to
removeAll: function() {
this.getRoot().removeAll(true);
this.callParent(arguments);
},