I try to use a combobox in my formpanel. This works and the store is loading when you click on the combobox. But when it is loaded it is not showing a background.I try to build and refresh the app but no matter what i do or what theme i use it keeps showing it transparant.
This is my combobox
{
xtype: 'combobox',
name: 'type',
anchor: '100%',
fieldLabel: 'Type',
displayField:'naam',
valueField:'id',
multiSelect: false,
editable: false,
store: 'ProductenGroepComboTypeJsonStore',
listConfig: {
loadingText: null,
loadMask: false
}
}
the store is this
Ext.define('JustRent.store.ProductenGroepComboTypeJsonStore', {
extend: 'Ext.data.Store',
requires: [
'JustRent.model.ProductenGroepComboTypeModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'ProductenGroepComboTypeJsonStore',
model: 'JustRent.model.ProductenGroepComboTypeModel',
proxy: {
type: 'ajax',
url: 'resources/json/productType.php',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}, cfg)]);
}
});
this is how it looks like
I'm not sure if this is ideal for you but you can define the css classes to apply to your list and try to do a workaround that way
listConfig: {
xtype: 'boundlist',
baseCls: 'your-css-list',
maxHeight: 200,
itemCls: 'your-css-list-item'
}
Hope it helps :)
Related
I have a proxy store that retrieves information from a webservice, I would like to show that information in a Panel in a way like a Grid, in which I set the "dataIndex" parameter to bind in the retrieved data.
How can I achieve this goal without extra coding, is that possible?
Something like this:
Proxy Store:
Ext.define('MyStore', {
extend: 'Ext.data.Store',
alias: 'store.myStore',
model: 'myModel',
autoload: true,
proxy: {
type: <wsType>,
url: <wsUrl>
},
scope: this
});
Panel:
Ext.define('<myPanel>', {
extend: 'Ext.panel.Panel',
...
store: Ext.create(<myStore>),
...
items: [
{
xtype: 'titlePanel',
cls: 'titlePanel',
html: '<div class="titlePanel"><h1>My Title</h1></div>',
},
{
xtype: 'form',
layout: 'vbox',
cls: 'whitePanel',
items: [
{
xtype: 'panel',
layout: 'column',
items: [
{
xtype: 'displayfield',
displayField: 'name',
dataIndex: 'name',
fieldLabel: Ext.locale.start,
name: 'start'
},
...
You don't need Store for displaying a single Record. Proxy can be defined at a model level.
Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
fields: ['id', 'firstName', 'middleName', 'lastName'],
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Load the model either in view constructor/initComponent or controller init method, once loaded push the record to ViewModel.
initComponent: function() {
this.callParent(arguments);
var me = this;
MyApp.model.Contact.load(1, {
success: function(record, operation) {
me.getViewModel().set('contact', record);
}
})
},
Bind the model property to the display field
items: [{
name: 'firstName',
fieldLabel: 'First Name',
bind: '{contact.firstName}',
xtype: 'displayfield'
}]
And here is the fiddle
https://fiddle.sencha.com/#fiddle/17t2
So I implemented a dataview and a list format card to display my json in store. I am trying to get the two view to share one store, since the data are the same. However the way i am doing it is not really working, if I only have Dataview or List it works fine. When I have both call the store, it will stop working... please help!
Dataview:
Ext.define('Sencha.view.hoardboard.HoardList', {
extend: 'Ext.DataView',
xtype: "hoardlist",
requires: ['Ext.XTemplate'],
config: {
flex:1,
scrollable: true,
store: 'Plist',
baseCls: 'columns',
itemTpl: '<div class=pin><img src={image}><div style="padding-top: 10px; padding-left: 20px; padding-right:20px">{name}<br>{brand}</div></div>'
}
});
List view
Ext.define('Sencha.view.hoardboard.HoardList2', {
extend: 'Ext.List',
xtype: "hoardlist2",
config: {
flex:1,
scrollable: true,
store: 'Plist',
grouped: true,
itemTpl: '{name}'
}
});
Model
Ext.define('Sencha.model.HoardList', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'name',
type: 'string'
},
{
name: 'image',
type: 'string'
},
{
name: 'type',
type: 'string'
},
{
name: 'brand',
type: 'string'
}
,
{
name: 'color',
type: 'string'
},
{
name: 'description',
type: 'string'
}
]
}
});
Store
Ext.define('Sencha.store.HoardList',{
extend: 'Ext.data.Store',
storeId: 'Plist',
model:'Sencha.model.HoardList',
title: 'My Collection',
autoLoad: true,
sorters: 'name',
grouper: {
groupFn: function(record) {
return record.get('name')[0];
}
},
proxy: {
type: 'ajax',
url : 'products.json',
reader: {type: 'json', rootProperty:'products'}
}
});
Thank you so much!
Generally speaking when you're using Sencha framework you don't share one store object between several visual controls.
If you want to use same store in two places you need to clone it and have two separate store objects.
Am having a tree view which gets its data from the tree store. But, however, am able to see only the small folders that gets displayed as part of a tree structure. the name of the nodes is not getting displayed, and when i try to print the record, it just says that its an empty string. Here is the code:
App/View
Ext.define('App.view.Hierarchy', {
alias: 'widget.hierarchy',
extend: 'Ext.panel.Panel',
initComponent: function () {
var config = {
xtype: 'panel',
border: false,
autoScroll: true,
baseCls: 'topMenu',
html: '<div class="PageTitle" style="width:600px;"><b>' + LANG.HIERARCHYT + '</b><br>' + LANG.HIERARCHYTxt + '<br>' + '</div>',
items: [{
xtype: 'toolbar',
border: false,
dock: 'top',
items: [{
xtype: 'button',
text: LANG.BTADDREG,
iconCls: 'icon-add-tb',
cls: 'tip-btn',
iconAlign: 'right',
action: 'addRegion',
id: 'ADDREGION'
}]
},
{
xtype: 'treepanel',
title: 'Hierarchy Tree',
id: 'hierarchyTree',
border: false,
alias: 'widget.hierarchyTree',
height: 1000,
viewConfig: {
enableDD: true,
plugins: {
ptype: 'treeviewdragdrop'
}
},
collapsible: false,
useArrows: true,
rootVisible: false,
store: Ext.create('Campus.store.HierarchyTree'),
displayField: 'Title',
multiSelect: false,
singleExpand: false,
}]
}
var holder = Ext.getCmp('center');
holder.remove(0);
holder.add(Ext.apply(config));
this.callParent(arguments);
}
});
Model
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID']
});
Store
Ext.define('App.store.HierarchyTree', {
extend: 'Ext.data.TreeStore',
model: 'App.model.HierarchyTree',
storeID: 'HierarchyTree',
proxy: {
type: 'ajax',
url: 'data/Locations.aspx',
reader: {
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST'
},
extraParams: {
mode: 'HIERARCHYFULLLIST'
}
},
autoLoad: true
});
Controller
Ext.define('App.controller.Hierarchy', {
extend: 'Ext.app.Controller',
stores: ['Me', 'Regions', 'Areas', 'Towns', 'HierarchyTree'],
model: ['Me', 'Teams', 'Regions', 'User', 'HierarchyTree'],
views: ['App.view.Hierarchy', 'App.view.AddRegions'],
refs: [{
ref: 'myHierarchyTree',
selector: 'hierarchyTree'
}],
init: function () {
this.getHierarchyTreeStore().load();
this.control({
'button[action=addRegion]': {
click: this.addRegion
},
'#hierarchyTree': {
itemclick: this.itemclick
}
})
},
itemclick: function (view, record) {
console.log(record.get('Title'))
}
});
Also, the JSON thats being returned is:
{"text":".","children": [{"text":"Asia Pacific","id":"537","level":"1", "expanded":
false,"singleClickExpand":true,"children":[{"text":"Japan", "cls":"xtreenode-Level2-
Indent", "id":"538", "hl1":"537","level":"2","singleClickExpand":true, "expanded":
false, "children":[]},
Treepanel's display field defaults to text, which is ok with the json being returned, but the problem is the store model, which should include as fields the text, cls ..and other attributes you have in your json. Otherwise these will not be mapped to the records and you get empty text.
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID', 'text', 'level','cls,....]
EDIT
You have modified the displayField to be the Title, but the json doesn't contain the title attribute. You have to simple fixes, either you modify the model if the text is actually the title. You can do this by setting a mapping to the field.
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : [{name:'Title',type:'string',mapping:'text'}, 'ID', 'LevelID', 'ParentID',]
This will cause the Title to be populated by the text values from the json.
Also you can remove the displayField config and then the text value will be applied, but this will still mean that the 'Title' value will be empty.
OK, finally got it:)
Set the displayfield in the tree to 'text'
displayfield : 'text'
And, Once again thank you nscrob
And one more question, could you please give me any guidance on how to open different views depending upon the level in the tree that is being clicked
This works.
if (record.get('level')==1)
{
this.erWin = Ext.create('App.view.EditRegions');
this.erWin.showWin();
}
else{
//open another_view
}
Using the example in "ext-designer-for-ext-js-4-users-guide.pdf" i've put together the following. The issue is that the store is not binding. ie the select is empty.
MyComboBox.js
Ext.define('MyApp.view.MyComboBox', {
extend: 'MyApp.view.ui.MyComboBox',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
Ext.define('MyApp.view.ui.MyComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldLabel: 'comboList',
displayField: 'comboList',
queryMode: 'local',
store: 'MyArrayStore',
triggerAction: 'all',
valueField: 'comboList',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
store/MyArrayStore.js
Ext.define('MyApp.store.MyArrayStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyArrayStore',
data: [
[
'Search Engine'
],
[
'Online Ad'
],
[
'Facebook'
]
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
name: 'comboList'
}
]
}, cfg)]);
}
});
** update **
this was driving me crazy. It's [turns out][1] my array need to be json format. When i updated it to
[{"comboList" : "Hello"}, {"comboList" : "Hi"}, {"comboList" : "GoodMorning"}]
it worked.
I started to try and pick apart your implementation but it seems somewhat convoluted, starting with the store where there is local data and a proxy defined but no url for the proxy.
It seemed easier to just give you a simplified implementation of a combobox (using local data because it seems that is what you are trying to do):
// the datastore
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data: [
{value: 1, name: 'Search Engine'},
{value: 2, name: 'Online Ad'},
{value: 3, name: 'Facebook'}
]
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'Title',
valueField: 'value',
displayField: 'name',
store: myStore,
queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
This creates a combobox inside of a little window with an OK button. When you press OK it will alert the visible text of the combobox Ext.getCmp('myCombo').getRawValue() and the value of the item in the combobox Ext.getCmp('myCombo').value.
If you drop this in your project you can get an idea of how it implements, it should just run.
If you actually wanted a remote datastore (from a webservice that returns json for example) you would just need to change the datastore configuration like so:
var myRemoteStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url: 'myWebservice.php', // whatever your webservice path is
reader: 'json',
},
autoLoad:true
});
I am having issue setting up pagination.
using the following example.
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
I have create a store in a separate file.
ie /app/store/tasks.js
app/store/tasks.js
Ext.define('AM.store.Tasks', {
extend: 'Ext.data.Store',
model: 'AM.model.Task',
autoLoad: true,
pageSize: 2,
proxy: {
type: 'ajax',
api: {
read: '/WarehouseProductImport/IndexGrid',
update: 'data/updateTasks.json'
},
reader: {
type: 'json',
root: 'tasks',
totalProperty: 'total',
successProperty: 'success'
}
}
});
in my app.js
launch: function () {
Ext.create('Ext.container.Container', {
width: 950,
height: 500,
renderTo: 'panelcontainer',
items: [
{
xtype: 'tasklist',
title: 'Tasks',
html: 'List of tasks will go here'
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: '', // how do i get this store as it's define in 'store/task.js'
dock: 'bottom',
displayInfo: true
}]
});
}
In the above method, "store" isn't initialized. Am i putting this method in the correct place. Are there any examples on how to set up pagination when the store is separated like above.