how to update or refresh the content of tab panel in sencha touch - updatepanel

i have list of items, while click the particular list item it will show the details of that item.. i have problem, for the first item click it shows the correct result but while click the next item i am getting that particular item details but it showing the old item details.this is my code
RadMobApp.views.patPanel = Ext.extend(Ext.Panel, {
id: 'pathView',
layout : 'fit',
initComponent: function() {
this.titleTxtc = new Ext.Component({
cls : 'top_title_text',
html: 'History'
});
this.backButton = new Ext.Button({
text: 'back',
height:15,
ui:'back',
handler: function () {
controller.showPanel();
},
scope: this
});
this.titleBar = new Ext.Toolbar({
dock: 'top',
cls: "top_tool_bar2",
height: 42,
items: [this.backButton, {xtype: 'spacer'}, this.titleTxtc, {xtype: 'spacer'}]
});
var tabs = new Ext.TabPanel({
xtype:"tabpanel",
id: 'tabpanel',
renderTo: Ext.getBody(),
width:400,
height: 150,
activeTab: 0,
layoutOnTabChange: true,
tabBar: {
cls: "top_tab_panel1",
height: 42,
style: 'padding-left:2px;'
},
items: [{
xtype: 'Panel1',
id: 'panel1',
title: 'Panel1',
height: 100
},{
xtype: 'Panel2',
id: 'panel2',
title: 'Panel2',
height: 100
},{
xtype: 'panel3',
id: 'panel3',
title: 'Panel3',
height: 100,
listeners: {
beforeshow: function(p) {
scope: this;
/* var tabPanel = p.ownerCt;
var tabEl = tabPanel.getTabEl(prmPanel);
Ext.fly(tabEl).child('span.x-tab-strip-text',
true).qtip = 'Tab is now enabled';
Ext.getCmp('panel2').enable(); */
}
}
}]
});
this.dockedItems = [this.titleBar];
this.items = [tabs];
RadMobApp.views.patPanel.superclass.initComponent.call(this);
}
});
how to clear the tab panel? Thanks in advance

try putting the config option
remoteFilter : true
to your store from which you are loading the data to the list.ie
new Ext.data.Store({
model: 'Test',
sortOnLoad: true,
remoteFilter : true,
autoLoad: true,
getGroupString : function(record) {
return record.get('FullName_FirstLast')[0];
},
proxy: {
type: 'ajax',
url : testUrl,
reader: {
type: 'json',
root: 'test'
}
}
})

Related

JSON response not assigned to textfield text

When i call the Method,JSON response not assigning to the textfield ,Here i mentioned through the id. But its not assigning to the text field text.
JSON response
Method
function viewgiftdetails(itemid,p,t) {
Ext.Ajax.request({
url : 'http://192.168.1.155:8181/WishList/ShowItemsByItemID/userID=3/itemID=19',
method: "GET",
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("Success", respObj[0].itemName);
Ext.getCmp('myitemname').setData(respObj[0].itemName)
Ext.getCmp('myitemdesc').setData(respObj[0].describe)
Ext.getCmp('myitemprice').setData(respObj[0].price)
},
failure: function (response) {
alert(response.responseText);
}
});
}
PANEL
var viewitemspnl = Ext.create('Ext.Panel', {
id: 'viewitemspnl',
scrollable:'vertical',
height: '100%',
width: '100%',
items: [{
xtype: 'toolbar',
ui:'light',
docked: 'top',
title: 'My items',
items: []
},
{
xtype: 'textfield',
name : 'itemName',
id:'myitemname',
label: 'Item Name',
useClearIcon: true
},
{
xtype: 'textfield',
name : 'itemdesc',
id:'myitemdesc',
label: 'Description',
useClearIcon: true
},
Whats wrong with my code?PLease help to solve this issue
I think it should not be
Ext.getCmp('myitemname').setData(respObj[0].itemName);
Because their is no any method setData() for the textfield.
Try this
Ext.getCmp('myitemname').setValue(respObj[0].itemName);

Extjs MVC run function after store loads

I've got a grid getting data through a json store. I want to display the total number of rows in the grid. The problem is that the store.count() function is running before the store loads so it is returning 0. How can I get my count function to run only once the store has loaded? I'm working in MVC, here is my app.js which has my counting logic in it.
Thank you for any help
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
resizable: 'true',
forceFit: 'true',
layout: 'fit',
items:[{
xtype: 'userpanel',
}]
});
var port = Ext.ComponentQuery.query('viewport')[0],
panel = port.down('userpanel'),
grid = panel.down('userlist'),
label = panel.down('label');
var count = grid.store.getCount();
var labelText = "Number of people in list: " + count;
label.setText(labelText);
}
});
store code:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'queue',
successProperty: 'success'
}
},
sortOnLoad: true,
//autoLoad: true,
sorters: [
{
property: 'PreReq',
direction: 'DESC'
},
{
property: 'Major1',
direction: 'ASC'
},
{
property: 'UnitsCompleted',
direction: 'DESC'
}
],
listeners:{
onload: function(){
var port = button.up('viewport'),
grid = port.down('userlist'),
panel = port.down('userpanel'),
label = panel.down('label'),
count = grid.store.getCount(),
labelText = "Number of people in list: " + count;
label.setText(labelText);
},
scope: this
}
});
grid code:
Ext.define('AM.view.user.List' , {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
height: 'auto',
width: 'auto',
//resizable: 'true',
features:[{
ftype: 'grouping'
}],
autoFill: 'true',
layout: 'fit',
autoScroll: 'true',
initComponent: function() {
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
//code for all my columns
]
];
this.callParent(arguments);
}
});
Try putting a listener on the store then listen for the onload event get the count and update the field that way. Though there are many ways to do this that is just one.
But in the example above you never load the store you just create it, which is why you see zero.
figured it out, needed to add a listener for the "load" event, not "onLoad". Code below...
Ext.define('APP.store.Store', {
extend: 'Ext.data.Store',
model: 'APP.model.Model',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},
sortOnLoad:true,
sorters: [{
property: 'last',
direction: 'ASC'
}],
listeners: {
load:{
fn:function(){
var label = Ext.ComponentQuery.query('#countlabel')[0];
label.setText(this.count()+ ' Total Participants);
}
}
}
});

Unable to SAVE data using proxy in ExtJS

Proxy update on ExtJS is not loading my update API instead it loads URL which I use to display data on GRID.
<script type="text/javascript">
Ext.onReady(function () {
var CoventryItemListStore = new Ext.data.Store({
storeId: CoventryItemListStore,
autoSave: true,
writer: new Ext.data.JsonWriter(),
reader: new Ext.data.JsonReader({
idProperty: 'id',
root: 'variables'
}, [{
name: 'id'
}, {
name: 'itemid'
}, {
name: 'triggerQuantity'
}, {
name: 'lastUpdatedBy'
}, {
name: 'lastUpdatedOn'
}]),
proxy: new Ext.data.HttpProxy({
method: 'POST',
prettyUrls: false,
url: '/admin/loadCoventryItemApprovalList.epm',
api: {
update: '/admin/updateCoventryItemApprovalList.epm'
}
}),
listners: {
'write': function (store, action, result, res, rs) {
if (action == 'update') {
var newId = res.raw.newId;
var oldId = res.raw.oldId;
if (newId != oldId) {
CoventryItemListStore.reload();
}
}
}
}
});
CoventryItemListStore.load();
var fm = Ext.form;
var CoventryItemListGridUi = Ext.extend(Ext.grid.EditorGridPanel, {
title: 'Coventry Item List',
store: CoventryItemListStore,
width: 980,
height: 650,
renderTo: 'coventryDiv',
defaults: {
width: 280
},
defaultType: 'textfield',
stripeRows: true,
// reader: CoventryItemListReader,
autoExpandColumn: 'coventryListCol',
align: 'center',
clicksToEdit: 1,
initComponent: function () {
this.columns = [{
xtype: 'gridcolumn',
header: 'ID',
sortable: true,
dataIndex: 'id'
}, {
xtype: 'gridcolumn',
header: 'ITEM ID',
sortable: true,
width: 250,
align: 'center',
dataIndex: 'itemid'
}, {
xtype: 'gridcolumn',
header: 'TRIGGER QUANTITY',
sortable: true,
// id: 'ftpCol',
width: 200,
align: 'center',
dataIndex: 'triggerQuantity',
editor: {
xtype: 'numberfield'
}
}, {
xtype: 'gridcolumn',
header: 'LAST UPDATED BY',
sortable: true,
width: 80,
align: 'center',
dataIndex: 'lastUpdatedBy',
id: 'coventryListCol'
}, {
xtype: 'gridcolumn',
header: 'LAST UPDATED ON',
sortable: false,
width: 100,
align: 'center',
dataIndex: 'lastUpdatedOn',
}];
this.listeners = {
'afteredit': function (e) {
params: {
var oldVal = e.originalValue;
var newVal = e.value;
var fieldName = e.field;
var itemID = e.record.get("itemid");
}
alert('Field \'' + fieldName + '\' changed from \'' + oldVal + '\' to \'' + newVal + '\'.(itemID: ' + itemID + ')');
}
}
var itemsPerPage = 100;
this.bbar = new Ext.PagingToolbar({
pageSize: itemsPerPage,
autoLoad: true,
store: CoventryItemListStore,
displayInfo: true,
displayMsg: 'Displaying categories {0} - {1} of {2}',
emptyMsg: "No categories to display"
});
this.tbar = new Ext.Toolbar({
xtype: 'toolbar',
items: [{
xtype: 'textfield',
id: 'searchValue'
}, {
xtype: 'button',
text: 'Search',
style: 'marginLeft: 5px',
enableToggle: true,
handler: function () {
vms.reload({
params: {
searchValue: Ext.getCmp('searchValue').getValue()
}
});
}
}]
});
CoventryItemListGridUi.superclass.initComponent.call(this);
}
});
new CoventryItemListGridUi();
});
</script>
well re posting the answer for better visibility
proxy: new Ext.data.HttpProxy({ method: 'POST', prettyUrls: false, url: '/admin/updateCoventryItemApprovalList.epm', api: { read: '/admin/loadCoventryItemApprovalList.epm' } })

store is undefined

I have this problem on ExtJS. I created a grid that display on a window, it will get json data from an external server side script. It is rougly working but the firebug keeps telling me that store is undefined everything I click on the columns in the grid. Can you please help me solve this. Here is my code:
var fields = [{
name: "Name",
type: "text"
}, {
name: "NSId",
type: "number"
}, {
name: "Id",
type: "number"
}, {
name: "Version",
type: "number"
}];
var columns = [{
header: 'Name',
id: 'Name',
width: 160,
sortable: true,
dataIndex: 'Name'
}, {
header: 'NSId',
id: 'NSId',
width: 45,
sortable: true,
hidden: true,
dataIndex: 'NSId'
}, {
header: 'Id',
id: 'Id',
width: 30,
sortable: true,
hidden: true,
dataIndex: 'Id'
}, {
header: 'Version',
id: 'Version',
width: 50,
sortable: true,
hidden: true,
dataIndex: 'Version'
}];
var searchAndPickUrl = OcsConfig.url.refto;
var pickerUrl = '?picker=' + config.picker;
var createRefTo = searchAndPickUrl + pickerUrl;
var jsonstore = {
xtype: 'jsonstore',
autoDestroy: true,
fields: fields,
root: 'candidates',
idProperty: 'Name',
url: createRefTo,
autoLoad: true
};
var cmpGrid = null;
var clickCell = function (trigger) {
var record = cmpGrid.getSelectionModel().getSelected();
var selValues = record.data['name'] + ',' + record.data['nsid'] + ',' + record.data['id'] + ',' + record.data['version'];
Ext.Msg.alert('Name', selValues);
};
var refToGrid = {
id: Ext.id(),
xtype: 'grid',
store: jsonstore,
columns: columns,
stripeRows: true,
defaults: {
anchor: '100%'
},
autoExpandColumn: 'Name',
height: 350,
width: 600,
title: '',
stateful: true,
stateId: 'grid',
listener: {
rowdblclick: clickCell
}
};
var refToWin = function refToInputVal(trigger) {
var values = config.options || [];
var cmpWin = null;
var genId = Ext.id();
var win = null;
if (cmpWin === null) {
win = {
xtype: 'window',
title: config.caption || '',
modal: true,
items: [{
xtype: 'form',
id: genId,
padding: 5,
defaults: {
anchor: '100%'
},
items: [refToGrid]
}],
bbar: [{
xtype: 'button',
text: 'OK',
handler: function () {
returnValue(trigger, cmpGrid);
cmpWin.hide();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function () {
cmpWin.hide();
}
}],
Thanks.
Change your store declaration...
var jsonstore = new Ext.data.JsonStore({
autoDestroy: true,
fields: fields,
root: 'candidates',
idProperty: 'Name',
url: createRefTo,
autoLoad: true
});

JSON data not showing when grid in dynamic tab?

My grid isnt showing data when put to tab. This grid, store, model, JSON are working when renderd to body or div, or as a part of a viewport. Only not showing when put in tab, that is also created using JSON and Tree! This is a (sometimes)working example. I cant figure it out, maybe scope bug ... Please help!
Ext.Loader.setConfig({ enabled: true });
Ext.require(['*']);
Ext.require('app.kontakt');
Ext.require('app.ponude');
Ext.require('app.gridStore');
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
},{
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items:[
myTree
]
},{
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype:'tabpanel',
id:'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'app/myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners:{
itemclick: function(view,record,item,index,e){
if(record.isLeaf() && record.raw.tabCls){
var tabId=record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if(existingTab){
mainPanel.setActiveTab(existingTab);
}else{
mainPanel.add(Ext.create(record.raw.tabCls,{id:tabId})).show();
}
}
}
}
});
Ext.define("app.kontakt",{
extend:"Ext.panel.Panel",
name:"kontakt",
title:"Kontakt",
layout:"border",
closable:true,
border: false,
items:[
{
region: 'north',
collapsible: false,
split:true,
layout:"fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid.json'
});
}
},{
text: 'Load2',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid1.json'
});
}
}]
},{
region: "center",
xtype:"grid",
id:"kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [
{header: 'name', dataIndex: 'name',flex:1},
{header: 'email', dataIndex: 'email', flex:1},
{header: 'phone', dataIndex: 'phone', flex:1}
]
}
]
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : '',
reader:{
type:'json',
root: 'items'
}
},
autoLoad:false
});
JSON for TREE
{
children: [
{ text:"KLIJENTI", expanded: true,
children: [{ text:"Kontakt", leaf: true , tabId : "tab1", tabCls: "app.kontakt"}]
}
]
}
JSON for GRID
{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555--222-1234"}
]}
ok... i have tes your code just by copy paste to my firebug (of course with edit the json urls),
and i got an error.... This is because the program flow...
if it was your script, and put them in a single file, you specify a grid before the store
here code works for me no error...
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
}, {
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items: [myTree]
}, {
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype: 'tabpanel',
id: 'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners: {
itemclick: function (view, record, item, index, e) {
if (record.isLeaf() && record.raw.tabCls) {
var tabId = record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if (existingTab) {
mainPanel.setActiveTab(existingTab);
} else {
mainPanel.add(Ext.create(record.raw.tabCls, {
id: tabId
})).show();
}
}
}
}
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone']
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: false
});
Ext.define("app.kontakt", {
extend: "Ext.panel.Panel",
name: "kontakt",
title: "Kontakt",
layout: "border",
closable: true,
border: false,
items: [{
region: 'north',
collapsible: false,
split: true,
layout: "fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler: function () {
myStore.load({
scope: this,
url: 'grid.json'
});
}
}, {
text: 'Load2',
handler: function () {
myStore.load({
scope: this,
url: 'grid1.json'
});
}
}]
}, {
region: "center",
xtype: "grid",
id: "kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [{
header: 'name',
dataIndex: 'name',
flex: 1
}, {
header: 'email',
dataIndex: 'email',
flex: 1
}, {
header: 'phone',
dataIndex: 'phone',
flex: 1
}]
}]
});