Hey All,
I'm trying to implement a grid (https://github.com/mitchellsimoens/Ext.ux.touch.grid) that loads data from a rest server I have setup. When first building the app, I used inline data in json format to load some test data into my grid. Now I have the rest server up an running and the results are loading in... but they are all loading over top of each other in the first row. One thing I noticed, was that the app.css has the list items with position:absolute; top:0; left:0; and when I commented that out it shows the results properly... but I assume there is a good reason for that.. so I don't want to rely on that. Here is my code, please let me know if you need anything else from me and i'll check often to answer any questions. Thanks!
app.js ... just the launch function
Code:
launch: function() {
//
Ext.Ajax.useDefaultXhrHeader = false;
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('qaApp.view.Main'));
},
the main view, the overview view contains the grid
Code:
Ext.define('qaApp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
config: {
tabBarPosition: 'bottom',
defaults: {
scrollable: true,
styleHtmlContent: true
},
items: [
{
xtype: 'overview',
iconCls: 'home'
},
{
xtype: 'orderdetails',
iconCls: 'bookmarks'
},
{
xtype: 'checklist',
iconCls: 'compose'
}
]
}
});
the overview, contains the grid view
Code:
Ext.define('qaApp.view.Overview', {
extend: 'Ext.Panel',
xtype: 'overview',
config:{
title: 'Overview',
layout: 'fit',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'panel',
html: 'Orders',
style: 'color:#ffffff;',
flex: 3
},
{
xtype: 'button',
ui: 'action',
iconCls: 'settings',
iconMask: true,
flex: 1,
action: 'showPopupSw'
},
{
xtype: 'button',
text: 'Load Selected',
ui: 'action',
iconCls: 'organize',
iconMask: true,
flex: 2,
disabled: true,
id: 'loadSelectedOrders',
handler: function(button){
button.up('tabpanel').setActiveItem(1);
}
},
{
xtype: 'button',
text: 'Scan QR Code',
ui: 'action',
iconCls: 'search',
iconMask: true,
flex: 2
},
]
},
{
xtype: 'grid-orders',
title: 'Orders'
} //item
] //items
} //config
}); //define
the grid view
Code:
Ext.define('qaApp.view.OrdersGrid', {
extend : 'Ext.ux.touch.grid.List',
xtype : 'grid-orders',
requires : [
'Ext.ux.touch.grid.feature.CheckboxSelection',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.ux.touch.grid.feature.Feature'
],
config : {
title : 'Orders',
store : true,
id : 'ordersGrid',
columns : [
{
header : 'ID',
dataIndex : 'id',
width : '15%'
},
{
header : 'Order Date',
dataIndex : 'order_date',
width : '15%'
},
{
header : 'Product ID',
dataIndex : 'product_id',
width : '15%'
},
{
header : 'Quantity',
dataIndex : 'quantity',
width : '15%'
},
{
header : 'Is Rush',
dataIndex : 'is_rush',
width : '15%'
},
{
header : 'Version',
dataIndex : 'version',
width : '15%'
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.CheckboxSelection',
launchFn : 'constructor'
}
],
listeners: {
selectionchange: function() {
var selectedCount = Ext.getCmp('ordersGrid').getSelectionCount();
var btn = Ext.getCmp('loadSelectedOrders');
if(selectedCount == 0){
btn.disable();
} else {
btn.enable();
}
}
}
},
applyStore : function() {
return new qaApp.store.OrdersGrid();
}
});
the grid store
Code:
Ext.define('qaApp.store.OrdersGrid', {
extend : 'Ext.data.Store',
config : {
model : 'qaApp.model.OrdersGrid',
autoLoad: true
}
});
the grid model
Code:
Ext.define('qaApp.model.OrdersGrid', {
extend : 'Ext.data.Model',
config : {
fields : [
'id',
'order_date',
'product_id',
'quantity',
'is_rush',
'version'
],
proxy: {
type: 'rest',
url: 'http://localhost:8080/tirani/workorders',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
Unanswered: Grid results loading on top of each other
Reply With Quote