mitchellsimoens / ext.ux.touch.grid Goto Github PK
View Code? Open in Web Editor NEWGrid components for Sencha Touch 2
License: Other
Grid components for Sencha Touch 2
License: Other
mvc/app/view/Grid.js extends Ext.ux.touch.grid.View instead of Ext.ux.touch.grid.List, so you get a warning when you load it. It also includes Sencha Touch 2.0.1, which is incompatible with the current Grid code.
Hi, May I ask the question?
I want to use your excellent custom component "Ext.ux.touch.grid" for my commercial product. Ext.ux.touch.grid has no license, but I have concern about a few.
If you are not mind, I hope that source code will be available by BSD or MIT license.
still i got this error pls help me...
Thanks in advance.
Uncaught TypeError: Object [object Object] has no method 'getItemHeight'
using sencha touch 2.1, in the show/hide demo only the header shows/hides/toggles not the item column
i doubletap record and remove all value..
i want this record edit but i can't..
so i edited this source..
i think it is your mistake..
plz! edit it
//Editable.js
handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();
if (editor) {
if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {
var field = editor.field,
component = field.getComponent(),
value = component.getValue();
if(value == ""){
console.log(editor.record.get(field.getName()));
value = editor.record.get(field.getName());
}
field.destroy();
if (field.isDirty()) {
editor.record.set(field.getName(), value);
} else {
field.getRenderTo().setHtml(editor.htmlValue);
}
this.setActiveEditor(null);
}
}
},
I've upgraded the framework to v2.3 and the grid view rows are now not rendering. This was working fine using ST v2.1. I've checked the CSS for the containers and it appears the container for the list is being set to a height of 0px. If I compare with the previous application using v2.1 the list is correctly set a height.
Can you have a look at it and provide a fix?
Noticed toggleColumn from Ext.ux.TouchGridPanel was missing. Here's one I wrote to fit my needs if anyone is looking for one.
I added the following to View.js
toggleColumnVisible: function(dataindex, visible) {
var me = this;
var el = me.element,
headerCells = el.query('.x-grid-header .x-grid-cell[dataindex="'+dataindex+'"]'),
dataCells = el.query('.x-dataview-item .x-grid-cell[dataindex="'+dataindex+'"]'),
cell;
if(headerCells.length > 0) {
cell = Ext.get(headerCells[0]);
cell.setVisible(visible);
}
for(var i = 0, j = dataCells.length;i < j; i++) {
cell = Ext.get(dataCells[i]);
cell.setVisible(visible);
}
}
Thanks for all your hard work on this extension Mitchell!
I'm defining a grid with the "touchgridpanel" xtype, using the Sorter feature. For example:
Ext.define('MyGrid', {
extend: 'Ext.Container',
config: {
items: {
xtype: 'touchgridpanel',
features : [{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}],
...
Then I try to create two instances of it:
Ext.create('MyGrid', {});
Ext.create('MyGrid', {});
But I get an error when creating the second one: "[Ext.create] Invalid class name or alias 'undefined' specified, must be a non-empty string".
This seems to be because of Ext.ux.touch.grid.feature.Feature line 29: "delete cfg.ftype". I'm not sure you should be deleting config values like this, since they seem to be reused across multiple instances.
If I delete that line, it works.
I looked through the code and saw that each field is only saved back to the record on the itemtap event. Without getting crazy I threw together this hack to save the active editor field before I call sync on the store.
Mitchell, If there is a better way in the framework to do this or if you have a design in mind for some changes, let me know and I'll code it.
var index, rowEl, rec;
current_view.fireEvent('itemtap', current_view, index, rowEl, rec, {
getTarget: function(name){
return false;
}
});
i doubletap record and remove all value..
i want this record edit but i can't..
so i edited this source..
handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();
if (editor) {
if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {
var field = editor.field,
component = field.getComponent(),
value = component.getValue();
if(value == ""){
console.log(editor.record.get(field.getName()));
value = editor.record.get(field.getName());
}
field.destroy();
if (field.isDirty()) {
editor.record.set(field.getName(), value);
} else {
field.getRenderTo().setHtml(editor.htmlValue);
}
this.setActiveEditor(null);
}
}
},
ftype : 'Ext.ux.touch.grid.feature.CheckBoxSelection',
should be:
ftype : 'Ext.ux.touch.grid.feature.CheckboxSelection',
Great component but found some issues recently in my app:
Also raised question on SO:
http://stackoverflow.com/questions/15189183/sencha-touch-grid
There seems to be a problem when building with the sencha Cmd v3.0.0.250. I'm guessing that its a theming issue. I've posted a detailed description of the issue on the Sencha forum:
Anyone else building this library for production successfully?
When the grid is empty, then the forward button is enabled. It should be disabled, because there is no data in the grid.
I would change lin 241 in Paging.js to this:
forwardButton.setDisabled(currentPage === pages || total === null);
change the file main.js from "extend: 'Ext.tab.Panel'" to "extend: 'Ext.Panel'", the data can't show in the list. How can i do? Thanks.
If you sort your grid's store manually (e.g. by calling store.sort(...), the grid's column headers don't update.
I was able to fix it by changing Sorter.js like this:
init : function(grid) {
[...]
store.on('sort', this.onSort, this);
},
onSort: function() {
var grid = this.getGrid();
if (grid.rendered) {
grid.fireEvent('sort');
} else {
grid.on('painted', function() {
grid.fireEvent('sort');
}, null, { single : true });
}
},
onDestroy: function() {
[...]
grid.getStore().un('sort', this.onSort, this);
},
Note that this requires the "destroy" fix from issue #37.
You cannot use a dataIndex/fieldname with hyphens. Looks to be choking the template engine.
I have a gridPanel which has columns taking more than the available width so i get a horizontal scroll bar at the bottom.
but when i use that scroller, its only moving the data. The headers are remaining fixed.
I just downloaded the whole master document and it's not showing anything rather than three dots which shows at starting time.
So from where i can get working code.
I'm trying to use your example with horizontal scrolling, but I want to have scroll if screen size is small and percentage or flex if is a tablet or PC.
this is my code:
layout : {
type : 'hbox'
}
.
.
.
width: Ext.os.is.Phone ? 80 : '10%'
But when I use flex or percentage the grid doesn't show data.
xtype:button is not rendering the actual button..nothing is displayed..:(
When running the latest Git Fetch of Ext.ux.touch.grid that is based on the Sencha Touch 2.1 GPL libraries, the horizontal scroll demo (and my code) no longer scrolls horizontally but wraps headers and rows around.
When I define features directly on the instance config they are initialized twice:
I believe we could just delete this one initFeatures call:
https://github.com/mitchellsimoens/Ext.ux.touch.grid/blob/master/Ext.ux.touch.grid/View.js#L36
Cheers
Roland
hideColumn and toggleColumn only hide the column header, but the column itself is still visible.
The onDestroy methods of the Feature classes aren't being called. Feature.initFeatures uses a 'beforedestroy' event to attach the listener, but I don't think that event is ever fired.
In addition, the onDestroy method of Sorter looks like it would break if it were ever called; it uses things like grid.el instead of grid.element.
I've spent quite a long time trying to diagnose a problem with the grid when there are more items than can be displayed in the list and the vertical scroll becomes active.
If I scroll to the bottom of the grid, it then snaps back up at least 1 row.
Have you any idea what might be causing this? I've even tried debugging into the framework code to see if there is something that might be causing it. I thought maybe the underlying list wasn't taking into account that it had a header so when scrolling it was assuming that it has more vertical space to scroll to. But I don't know what bit of code causes the scroll to snap/bounce back? I've tried using a vanilla list instead of the grid and it seems to work correctly, so I'm really stumped as to the problem and a possible fix.
In your MVC example (in Safari 5.1.7 for Mac), if I click the sort headers on one grid, then switch to the other one, clicking its sort headers sorts the first grid instead.
Hi,
I'm trying to use your grid into my application. Everyting works fine when i run my application in my browser, but when i build it an copy the resulted apk file on my tablet it dosn't work.
The only thing that i see is loading screen...
Can u help me.
i olso use Android Virtual Devices simulator and i have the same problem...
The tablet that i use is an evolio 10'' with 2.2.2 android version. and i use ST 2.1.1 sdk
When i run "sencha app build native" it create my .apk file but it remains stuck on: "Packaging your application as a native app...". Is this why it doesn't work on my tablet?
Hi,
I'm using a grid whose store is based on a SQL proxy. When adding the paging feature, it looks like the store is not getting correct infos from the proxy, in particular getTotalCount which returns the number of records corresponding to pageSize and not the number of records in database.
Any ideas about this issue ?
Thanks in advance,
when I select a record in the list, I want to show the detail of the selected record in a popup panel. How can I do? Thanks.
The sorting direction should be persisted and inverted for the same column. To reproduce, tap one column and then another and you will see how the sorting direction gets inverted from one to another.
Bellow is a fix proposal: in Sorter class, function handleHeaderTap, replace next line:
dir = sorter ? sorter.getDirection() : 'ASC',
with:
dir = (sorter && (sorter.getProperty() === dataIndex)) ? sorter.getDirection() : 'DESC',
Also, when taping for the first time on a column, the user expects as the sorting to ascending. So, since the sorting get inverted when store's sort function is called (see bellow), the default direction should be 'DESC:
store.sort(dataIndex, dir === 'DESC' ? 'ASC' : 'DESC');
Thanks.
Even if the store is sorted when you create the grid, the sort icons in the header don't appear until you click the header.
For example, add this to the store in horizontal.js:
sorters: [{
property: 'company',
direction: 'ASC'
}],
You won't see the sort icons. One way to fix this is to add:
this.fireEvent('sort');
at the end of View.js's initialize() method, and add the method:
updateStore: function(store) {
this.callParent(arguments);
if (this.initialized) {
this.fireEvent('sort');
}
},
I just updated my chrome to version 29.0.1547.57 m and the grid component disapeared.
I don't know if it can help but when I modify this rule :
.x-layout-box.x-vertical > .x-layout-box-item.x-flexed
{
min-height: 0 !important;
}
with min-height: 100% !important; , the grid reaper but the size is fixed and not good for other grids.
When I change attribute 'flex' by 'height', the grid reaper.
If you change a grid's store after it's created (e.g. with setStore), the sort headers no longer update when the new store is sorted.
Hello Mitchell,
I would like to augment the columns config in one of my features before the tpl is build (Ext.ux.touch.grid.List::_buildTpl).
Currently the features are initialized afterwards, any tip what I should do here, or how to extend?
Thanks,
Roland
i doubletap record and remove all value..
i want this record edit but i can't..
so i edited this source..
handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();
if (editor) {
if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {
var field = editor.field,
component = field.getComponent(),
value = component.getValue();
if(value == ""){
console.log(editor.record.get(field.getName()));
value = editor.record.get(field.getName());
}
field.destroy();
if (field.isDirty()) {
editor.record.set(field.getName(), value);
} else {
field.getRenderTo().setHtml(editor.htmlValue);
}
this.setActiveEditor(null);
}
}
},
It looks like an error to me, but I'm not sure.
Why are you pulling the value from the component and not from the field?
Each field, e.g. Ext.field.Text has a getValue function which we could use here:
https://github.com/mitchellsimoens/Ext.ux.touch.grid/blob/master/Ext.ux.touch.grid/feature/Editable.js#L84
Thanks for your time
Roland
For the reason that lower version of ST is not working properly in Chrome 43+, I update my ST to 2.4.2. After updating my app, I found that Ext.ux.touch.grid come with a bug: the first row is hidden by table header and start show data from row 2 . The First row can only show temporary by scrolling down the table.
Can you offer any fixed for this bug?
Do i need to add the pagesize proprety for the store?
In the example paging.js the property page.size is not added.
I alos added the pagesize property but still the same issue,the grid is not loading correctly,it keeps loading all the data.
Paging toolbar is added but the buttons next previous are not functionning.
In your mvc example, I moved the grid in Main.js into its own class, MainGrid.js:
Ext.define('Grid.view.MainGrid', {
extend: 'Ext.ux.touch.grid.View',
xtype : 'mainGrid',
config: {
tabBarPosition: 'bottom',
title : 'Grid',
columns : [
{
header : 'Text',
dataIndex : 'text',
width : '90%'
},
{
header : 'Amount',
dataIndex : 'amount',
width : '10%'
}
]
}
});
and used it in Main.js like this:
{
xtype : 'mainGrid',
store : 'Grid'
}
This works. But then I tried adding a sorting feature to MainGrid.js:
features: [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
This gives me an error in Feature.js line 38:
TypeError: 'undefined' is not a function (evaluating 'me._features.add(feature)')
It seems to be using _features, which is also used by the Sencha config system when you use "features" as a config name.
Sorry, one more :) Say I create two instances of the same subclass of Ext.ux.touch.grid.View, both with sortable columns. The second grid appears without sort indicators. And clicking the column headers from the second grid causes the sort indicators on the first grid to change. I think this is because it's calling getColumns(), which returns the same array instance for both grids, and modifying its elements.
Long example, but it's mostly based on your "sorted" example:
Ext.define('TestModel', {
extend : 'Ext.data.Model',
config : {
fields : [
'company',
'price'
]
}
});
var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
sorters : [
{
property : 'price',
direction : 'DESC'
}
],
data : [
{ company : 'A', price : 63.26},
{ company : 'B', price : 35.57},
{ company : 'C', price : 45.45}
]
});
var store2 = Ext.create('Ext.data.Store', {
model : 'TestModel',
sorters : [
{
property : 'price',
direction : 'DESC'
}
],
data : [
{ company : 'D', price : 71.72},
{ company : 'E', price : 29.01},
{ company : 'F', price : 83.81}
]
});
Ext.define('MyGrid', {
extend: 'Ext.ux.touch.grid.View',
xtype: 'mygrid',
config: {
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Company',
dataIndex : 'company',
width : '50%'
},
{
header : 'Price',
dataIndex : 'price',
width : '50%'
}
]
}
});
Ext.create('Ext.Container', {
fullscreen : true,
items : [
{
xtype : 'mygrid',
height : 200,
store : store
},
{
xtype : 'mygrid',
height : 200,
store : store2
}
]
});
List._buildTpl now sets the line-height style to the list's itemHeight config. But if you set this config to null, to indicate that you don't want the line-height specified, you end up with the CSS "line-height: undefinedpx". It should check to make sure this config isn't null before adding the style.
var grid = Ext.ComponentQuery.query('grid-grid')[0];
grid.hideColumn(0);
grid.showColumn(0);
I think this is because the column element is cached, but the header is re-drawn with new elements.
There was in issue where doubletap did create an editable field, but immediately was followed with the blur event which converted the edit field back into a normal cell. This issue only happens in the stock Android browser. I could not reproduce in Chrome (Android) or Safari (iOS).
I fixed the problem in Ext.ux.touch.grid/feature/Editable.js by not attaching the blur event untill after the focus has happened:
// OLD CODE // editor.field.on({ scope: this, focus: 'onFieldBlur' }); editor.field.on({ scope: this, blur: 'onFieldBlur' }); // \OLD CODE // // NEW CODE// editor.field.on({ scope: this, focus: function () { editor.field.on({ scope: this, blur: 'onFieldBlur' }); } }); // \NEW CODE //
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.