Ext Js Paging not works with ExtDirect Grid Panel - extjs4

Here is my thread ,i posted the actual problem of paging here in this area.
you can help me from this thread
sencha forum
sencha forum Ext Paging problem with EXt direct Grid panel

Finally i got the answer from the forum
My Store Js
var store = Ext.create('Ext.data.Store', {
model : 'Users',
remoteSort : true,
autoLoad : true,
pageSize: 5, // items per page
sorters : [{
property : 'name',
direction : 'ASC'
}],
proxy : {
type : 'direct',
directFn : 'Users.showAllUsers',
reader: {
root: 'users'
}
}
});
My PHP function
function showAllUsers($params)
{
$sort = $params->sort[0];
$field = $sort->property;
$direction = $sort->direction;
$start = $params->start;
$end = $params->limit;
($direction == 'ASC' ? 'ASC' : 'DESC');
$dbh = Dbconfig::dbconnect();
$stmt = $dbh->prepare("SELECT count(*) FROM users");
$stmt->execute();
$number_of_rows = $stmt->fetchColumn();
$sth = $dbh->prepare("SELECT * FROM users ORDER BY name $direction LIMIT $start,$end");
$sth->execute();
$dataAll = $sth->fetchAll();
$data = array(
"success" => mysql_errno() == 0,
"total" => $number_of_rows,
"users" => $dataAll
);
return $data;
}

Below is the sample on how your store and sample results should be so that your pagination works as required.
Store should look like below
var myStore = Ext.create('Ext.data.Store', {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
],
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'records',
totalProperty: 'recordCount',
successProperty: 'success'
}
}
});
and the results from your server should be like
{
recordCount: 63,
records: [
{
id: 944,
firstName: "Shannon",
lastName: "Joy"
},
{
id: 1819,
firstName: "Remi"
lastName: "Lucas"
},
.......
}

Related

Query Rally Lookback API with owner name in output

I want a list of all the people who have revised the given user story in addition to other data.
I'm querying the Rally Lookback REST API with the following JSON data:
{
"find" : { "FormattedID": "$STORY" },
"fields" : ["ObjectID", "_ValidFrom", "_ValidTo", "Blocked", "c_KanbanState", "Owner"],
"compress" : true
}
With this query, I get the Owner's OID, like so:
{
"_ValidFrom": "2014-05-09T15:18:29.912Z",
"_ValidTo": "9999-01-01T00:00:00.000Z",
"ObjectID": 18326652440,
"Blocked": false,
"Owner": 13786838413,
"c_KanbanState": "Accepted"
}
Is there a way to hydrate that Owner field? I'd like to see "John Smith", but I'd settle for "jsmith#example.com".
If I have to use the WSAPI for this, is there a way to query for a group of Owner OIDs at once -- if so, a sample would be helpful -- or will I need to loop through the collection of values and query each Owner individually?
As Trever said, in Lookback API user fields cannot be hydrated.
As far as an example that hydrates user fields using wsapi, the code below uses shapshotstore to get snapshots where '_PreviousValues.Blocked' : {$exists: true}, and then uses Rally.data.ModelFactory to get the DisplayName of owner in each snapshot.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
scopeType: 'iteration',
comboboxConfig: {
labelWidth: 100,
width: 300
},
launch: function() {
var that = this;
var iterationComboBox = Ext.create('Rally.ui.combobox.IterationComboBox',{
listeners:{
ready: function(combobox){
var iterationOid = combobox.getRecord().get('ObjectID');
that._loadStories(iterationOid);
},
select: function(combobox){
var iterationOid = combobox.getRecord().get('ObjectID');
this._loadStories(iterationOid);
},
scope: this
}
});
this.add(iterationComboBox);
},
_loadStories:function(iterationOid){
var that = this;
var snapshotStore = Ext.create('Rally.data.lookback.SnapshotStore', {
autoLoad:true,
find: {
'_TypeHierarchy': 'HierarchicalRequirement',
'_ProjectHierarchy': 12352608219,
'_PreviousValues.Blocked' : {$exists: true},
'Iteration': iterationOid
},
fetch: ['Name','FormattedID','ScheduleState','Blocked','_ValidFrom','_ValidTo', 'BlockedReason','Owner'],
order: 'OpenedDate DESC',
hydrate: ['Blocked','ScheduleState'],
compress: true,
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
that._onStoriesLoaded(snapshotStore, records);
},
scope:this
}
});
},
_onStoriesLoaded:function(store, records){
var that = this;
var promises = [];
_.each(records, function(story) {
promises.push(that._hydrateOwner(story, that));
});
Deft.Promise.all(promises).then({
success: function(results) {
that._stories = results;
console.log('that._stories', that._stories);
that._makeGrid();
}
});
},
_hydrateOwner:function(story, scope){
var deferred = Ext.create('Deft.Deferred');
var that = scope;
var ownerDisplayName = null;
var userOid = story.get('Owner');
var storyBlocked = story.get('Blocked');
Rally.data.ModelFactory.getModel({
type: 'User',
scope: this,
success: function(model, operation) {
fetch: ['UserName', 'DisplayName'],
model.load(userOid, {
scope: this,
success: function(record, operation) {
owner = record.get('DisplayName');
var fid = story.get('FormattedID');
var state = story.get('ScheduleState');
var name = story.get('Name');
var blocked = story.get('Blocked');
result = {
"fid" : fid,
"name" : name,
"state" : state,
"blocked" : blocked,
"owner" : owner
};
deferred.resolve(result);
}
});
}
});
return deferred;
},
_makeGrid: function() {
if (this.down('#grid')) {
this.down('#grid').destroy();
}
var gridStore = Ext.create('Rally.data.custom.Store', {
data: this._stories
});
var _grid = Ext.create('Rally.ui.grid.Grid', {
itemId: 'grid',
store: gridStore,
columnCfgs: [
{
text: 'Name', dataIndex: 'name'
},
{
text: 'FormattedID', dataIndex: 'fid'
},
{
text: 'ScheduleState', dataIndex: 'state'
},
{
text: 'Blocked', dataIndex: 'blocked'
},
{
text: 'Owner', dataIndex: 'owner'
}
]
});
this.add(_grid);
this._grid.reconfigure(gridStore);
}
});
Unfortunately, per the documentation -
It is not possible to hydrate some field types (e.g. User).
See the hydration section of the documentation
And to add to what Nick and Trever have said, if you want to know who has revised a given story, the field you're looking for is "_User". Owner is the owner, _User is who created the revision. Nick's example code can be tweaked to hydrate the _User, since it's just an OID like Owner.
A caveat: if someone changed Only a big text field (like the Description), that doesn't create a snapshot so won't be returned.

autocomplete with extjs4: can not access to service

I work with extjs 4,
I want to do autocomplete with combobox
meaning when I entered a text in the combobox a request will send to database in order to display a list of emplyees ( in my case ) according to text entered in the combobox
in emplyeesModel.js I have
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'employeesService',
reader: {
type: 'json',
root: 'users'
}
}
});
in emplyeesView.js I have
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr'
}
in the service employeesService.java I have
public class employeesService{
public List<employees> getEmployeesListByLibelle(String libelle) {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp where emp.libelle=:libelle ");
query.setParameter("libelle", libelle);
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
}
but when I run my example I have this errror :
GET http://localhost:8080/employeesService.getEmployeesListByLibelle?_dc=1376728740208&searchStr=testSearch&page=1&start=0&limit=25&filter=%5B%7B%22property%22%3A%22label%22%7D%5D 404 (Introuvable) ext-all-rtl.js:21

How to inform a selectfield element from response of Ext.Ajax.request?

I need to inform a selectfield sencha element from callback of Ext.Ajax.request({})
I have a this code, for example,
Ext.Ajax.request({
url: '/express/EXPRESSVE00007_es.jsp',
timeout: 90000,
params: {
evento : action,
cookie: document.cookie,
NAME : Ext.getCmp("txtName").getValue(),
LAST : Ext.getCmp("txtLast").getValue(),
SEX : Ext.getCmp("txtSex").getValue()
},
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
Ext.Msg.alert(jsonResponse)
},
failure: function() {
Ext.Msg.show({
title: "Failure",
msg: "Error, failed response",
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
})
and my selectfield,
{
xtype: 'selectfield',
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
displayField: 'desc',
hiddenName: 'second-select',
options: [
{desc: '', value: ''},
{desc: '', value: ''}
]
}
In this case, I need to inform "desc" and "value" field from callback Ext.Ajax.request, but I don't know. Please help me.
You can inform the selectfield from an Ext.Ajax.request by updating it's store.
You could declare a store to store all the field values and then on response from the request, you can shuffle the data store to which selectfield is binded.
E.g
{
xtype: 'selectfield',
store: sampleStore,
valueField:'value',
displayField:'desc',
}
and update the store values on Ext.Ajax.request's response like this,
Ext.StoreMgr.get('sampleStore').load();
You can do below
Test = Ext.regModel('Test', {
fields: [{
name: 'desc',
type: 'string'
}, {
name: 'value',
type: 'string'
}]
});
exStores = new Ext.data.Store({
model: 'Test',
autoLoad: false });
and select field
{
xtype: 'selectfield',
store: exStores,
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
valueField:'value',
displayField:'desc',
}
and ajax request
Ext.Ajax.request({
...
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
exStores.loadData(jsonResponse, false);
Ext.Msg.alert(jsonResponse)
},
...
})
Hope this help.

ExtJs:Initializing a global variable

I have a global variable which needs to be initialized when the store is loaded and needs to use that value in another store as follows
var cp = 0;
Ext.onReady(function() {
Ext.define('Init', {
singleton: true,
cp: 0
});
Ext.define('loggedUserList', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]
});
loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,
proxy: {
type: 'ajax',
url: url+'/lochweb/loch/users/getLoggedUser',
reader: {
type: 'json',
root: 'provider'
},
listeners: {
load: function(loggedUser) {
Init.cp = loggedUser.getAt(0).data.id;
}
}
});
});
I am using the value of cp in another url as follows: url: url + '/lochweb/loch/vocabulary/getVocabularyByProvider?providerId=' + Init.cp,
Ext.define('vocbList', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
mapping: 'id'
},
{
name: 'code',
mapping: 'code'
}
]
});
var vocabulary = Ext.create('Ext.data.Store', {
model: 'vocbList',
autoLoad: true,
proxy: {
type: 'ajax',
url: url+'/lochweb/loch/vocabulary/getVocabularyByProvider?providerId='+Init.cp,
reader: {
type: 'json',
root: 'Vocabulary'
}
}
});
but its value is still 0. I tried using(cp, Init.cp). How to assign its value form store so that it can be reused?
Thanks
Store loads data asynchronously, so you can't be sure that Init.cp will be initialized with a new value before the other store is been loaded.
Try with this:
var cp=0;
Ext.onReady(function(){
Ext.define('Init', {
singleton: true,
cp: 0
});
Ext.define('vocbList', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'code', mapping: 'code' }
]
});
var vocabulary = Ext.create('Ext.data.Store', {
model: 'vocbList',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'Vocabulary'
}
}
Ext.define('loggedUserList', {
extend: 'Ext.data.Model',
fields: ['id','name']
});
loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getLoggedUser',
reader: {
type: 'json',
root: 'provider'
}
},
listeners: {
load:function(loggedUser){
Init.cp = loggedUser.getAt(0).data.id;
vocabulary.getProxy().url = url+'/lochweb/loch/vocabulary/getVocabularyByProvider?providerId='+Init.cp;
vocabulary.load();
}
}
});
});
As you can see, you have to set the url of the vocabulary proxy dynamically when the first store is just loaded and then load the store.
Cyaz
Here you declare loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,...} with Init.cp is assigned with some data in load(). But you cannot confirm that Init.cp has actually had value at the time you declare variable vocabulary (i.e. maybe loggedUser has not yet fully been loaded). So it still be 0 in the url.
To confirm, you should move codes of vocbList and vocabulary into a function:
function vocabularyLoad() {
Ext.define('vocbList', {...});
var vocabulary = ...
}
and use the function this way in loggedUser:
loggedUser = Ext.create('Ext.data.Store', {
...
listeners: {
load:function(loggedUser){
Init.cp = loggedUser.getAt(0).data.id;
vocabularyLoad();
}
}
});
But actually, this refactoring makes the assignment of Init.cp redundant because you can directly pass the value of loggedUser.getAt(0).data.id into the defined function.

Deleted records from store keeps showing up

I have created a local store and model for remembering username and password:
Store:
ToolbarDemo.stores.localsettingsstore = new Ext.data.Store({
model: 'UserSettings',
proxy: new Ext.data.LocalStorageProxy(
{
id: 'data',
proxy:
{
idProperty: 'id'
}
}),
autoLoad: true,
autoSave: true,
listeners:
{
beforesync: function()
{
console.log("SYNCING");
console.log("Number of data: ");
console.log(this.getCount());
},
datachanged: function()
{
console.log(this.getProxy());
console.log("DATA CHANGED");
console.log("Number of data: ");
console.log(this.getCount());
}
}
});
Model:
Ext.regModel('UserSettings', {
fields: [
{name: 'username', type: 'string'},
{name: 'password', type: 'string'},
{name: 'storeUsernamePassword', type: 'boolean'}
]
});
If the user want to store the username and password, this function is invoked:
function setLocalUsernameAndPassword(localUsername, localPassword, bStoreUsernameAndPassword)
{
removeLocalUsernameAndPassword(false); // Remove all previous inputs (Should just be one)
ToolbarDemo.stores.localsettingsstore.add({username: localUsername, password: localPassword, storeUsernamePassword: bStoreUsernameAndPassword});
}
The store is set to autoload and autosave, so it should not be nessecary to run a .sync() on the store.
If the user chooses to not store the username and password, i remove all records from the store by invoking:
function removeLocalUsernameAndPassword(bClearFields)
{
//ToolbarDemo.stores.localsettingsstore.removeAll();
ToolbarDemo.stores.localsettingsstore.each(function(record)
{
console.log("Removing " + record.data.username);
ToolbarDemo.stores.localsettingsstore.remove(record);
});
if(bClearFields)
{
Ext.getCmp("usernameField").value = "";
Ext.getCmp("passwordField").value = "";
Ext.getCmp("checkboxStoreUserInfo").checked = false;
}
}
Afterwards i can see that the store is empty, BUT if i refresh the page (Start the app once again), all the records are back plus the one i stored.
Can anyone see what i'm missing to do this properly?
Thanks in advance.
I finally found a guy that had exactly the same problem.
The solution:
You have to add a field with name "id", and type "int".
This makes sencha able to delete the record.
Ext.regModel('UserSettings', {
fields: [
{name: 'id', type: 'int'},
{name: 'username', type: 'string'},
{name: 'password', type: 'string'},
{name: 'storeUsernamePassword', type: 'boolean'}
]
});
After i did this, i also had to do a store.save() after each update.