Link to store in app.js?
I created a model and saved a file in it json
as shown below. How can I link to this store in mine app.js
?
I would like to take an example of a lookup list that Sencha gives here .
And use storage as a replacement for this line in the example:
store = this.getStore();
[Update] Added reformatted app.js
here .
Model:
Ext.define('Sencha.model.Contact', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'lastName',
type: 'string'
}]
}
});
Store:
Ext.define('Sencha.store.Contacts', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.Contact',
sorters: 'firstName',
autoLoad: true,
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
proxy: {
type: 'ajax',
url: 'contacts.json'
}
}
});
Formatted: app.js
Ext.application({
phoneStartupScreen: "resources/loading/Homescreen.jpg",
tabletStartupScreen: "resources/loading/Homescreen~ipad.jpg",
glossOnIcon: false,
icon: {
57: "resources/icons/icon.png",
72: "resources/icons/icon@72.png",
114: "resources/icons/icon@2x.png",
144: "resources/icons/icon@114.png"
},
requires: ["Ext.data.Store", "Ext.List", "Ext.field.Search", "Ext.Toolbar"],
launch: function() {
var a = this.getListConfiguration();
if (!Ext.os.is.Phone) {
Ext.Viewport.add({
xtype: "panel",
width: 380,
height: 420,
centered: true,
modal: true,
hideOnMaskTap: false,
layout: "fit",
items: [a]
}).show()
} else {
Ext.Viewport.add(a)
}
},
getListConfiguration: function() {
return {
xtype: "list",
ui: "round",
pinHeaders: false,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: this.getStore(),
grouped: true,
emptyText: '<div style="margin-top: 20px; text-align: center">No Matching Items</div>',
disableSelection: true,
items: [{
xtype: "toolbar",
docked: "top",
items: [{
xtype: "spacer"
}, {
xtype: "searchfield",
placeHolder: "Search...",
listeners: {
scope: this,
clearicontap: this.onSearchClearIconTap,
keyup: this.onSearchKeyUp
}
}, {
xtype: "spacer"
}]
}]
}
},
getStore: function() {
if (!this.store) {
this.store = Ext.create("Ext.data.Store", {
fields: ["firstName", "lastName"],
sorters: "lastName",
groupField: "lastName",
data: [{
firstName: "Tommy",
lastName: "Maintz"
}, {
firstName: "Rob",
lastName: "Dougan"
}, {
firstName: "Ed",
lastName: "Avins"
}, {
firstName: "Jamie",
lastName: "Avins"
}, {
firstName: "Dave",
lastName: "Dougan"
}, {
firstName: "Abraham",
lastName: "Elias"
}, {
firstName: "Jacky",
lastName: "Ngyuyen"
}, {
firstName: "Jay",
lastName: "Ngyuyen"
}, {
firstName: "Jay",
lastName: "Robinson"
}, {
firstName: "Rob",
lastName: "Avins"
}, {
firstName: "Ed",
lastName: "Dougan"
}, {
firstName: "Jamie",
lastName: "Poulden"
}, {
firstName: "Dave",
lastName: "Spencer"
}, {
firstName: "Abraham",
lastName: "Avins"
}, {
firstName: "Jacky",
lastName: "Avins"
}, {
firstName: "Rob",
lastName: "Kaneda"
}, {
firstName: "Ed",
lastName: "Elias"
}, {
firstName: "Tommy",
lastName: "Dougan"
}, {
firstName: "Rob",
lastName: "Robinson"
}]
})
}
return this.store
},
onSearchKeyUp: function(f) {
var e = f.getValue(),
b = this.getStore();
b.clearFilter();
if (e) {
var d = e.split(" "),
a = [],
c;
for (c = 0; c < d.length; c++) {
if (!d[c]) {
continue
}
a.push(new RegExp(d[c], "i"))
}
b.filter(function(h) {
var g = [];
for (c = 0; c < a.length; c++) {
var j = a[c],
i = h.get("firstName").match(j) || h.get("lastName").match(j);
g.push(i)
}
if (a.length > 1 && g.indexOf(false) != -1) {
return false
} else {
return g[0]
}
})
}
},
onSearchClearIconTap: function() {
this.getStore().clearFilter()
}
});
+3
user568866
source
to share