Develop Reference

How to overide extJS grid filter

I am creating a new project in that I am using Grid.
Here is my grid.
Ext.define('myProj.view.base.grid.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
controller: 'myProj-controller-base-grid-myGridcontroller',
requires: [
"myProj.controller.base.grid.myGridcontroller",
'Ext.grid.feature.Grouping',
'Ext.grid.plugin.BufferedRenderer',
'Ext.grid.filters.Filters',
],
mixins: ['Deft.mixin.Injectable'],
inject: ["gridStore"],
config: {
gridStore: null,
},
emptyText : "No data available",
plugins: {
gridfilters: true
},
overflowY: 'auto',
width:'100%',
stripeRows: false,
columnLines: false,
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE',
allowDeselect: true
},
initComponent: function () {
let _this=this;
Ext.apply(this, {
store: this.getListGridStore(),
});
this.callParent(arguments);
}
});
Now I want to overideto my filter. I have writtent my override code I am looking many examples but I am not geeting how to connect these two codes. ANy help will be usefull.
The overide code which I wanted to place here look like this.
Ext.override(Ext.grid.filters.filter.List, {
createMenuItems: function (store) {
debugger;
}
});

I believe the override works but the createMenuItems function is not called.
Did you define the filter for each column? Like in the code example shown here.
{
dataIndex: 'rating',
text: 'Rating',
width: 75,
filter: {
type: 'list',
value: 5
}
}

I have a component define by itemid how I can get it in controller

i m new in sencha . i always use id to define my component . but now i want to change it to itemid . and i found the Ext.getcmp('id'), is not work . and when i use Ext.componentquery.query('itemid') ,the console in chrome said Ext.componentquery is not a function. what can i do?
my view code:
Ext.define('ylp2p.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.carousel.Carousel',
'ylp2p.store.datainterests',
'Ext.Label',
'Ext.List'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: 'vertical',
items: [
{
title: '首页',
iconCls: 'home',
styleHtmlContent: true,
//true to automatically style the HTML inside the content target of this component (body for panels).
scrollable: true,
layout: 'card',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'ylp2p'
},
{
xtype: 'container',
layout: 'vbox',
items:[
{
xtype: 'label',
itemId: 'datalabel',---------this component is what i want
height: 50,
store: 'datainterests',
tpl: '金额：{data},利息：{earn}',
}//end label
]
}
]//end items
}
]
},//end config
//end listeners
});
my controller code :
Ext.define('ylp2p.controller.viewdata',{
extend: 'Ext.app.Controller',
launch: function(){
console.log('hello ! here is controller launch function');
var storeId = Ext.create('ylp2p.store.datainterests');
storeId.load({
callback: function(records, operation, success){
Ext.each(records, function(record) {
Ext.ComponentQuery.query("main > datalabel").setData({----it cant work . why?
data : record.get('data'),
earn : record.get('earn')
});
});
}
});
}
});
the console error said:
Uncaught TypeError: Ext.ComponentQuery.query(...).setData is not a function

i got it
var label = Ext.ComponentQuery.query('main #datalabel')[0];
label.setData({
data : record.get('data'),
earn : record.get('earn')
});

I found Sencha's own code to use menu.down('#groupMenuItem') to access itemId:'groupMenuItem'. So you should be fine using:
Ext.ComponentQuery.query('#itemid')

Use this.
var label = Ext.ComponentQuery.query('main #datalabel'); -- check on console label should not undefined
label.tpl.updateData -- you will find methods with tpl

sencha touch ListPaging plugin "load more" button position issue

I'm facing an issue regarding the position of the Load More... button in sencha touch2. Here, the Load More button is added using ListPaging plugin and from the Ext.plugins.Listpaging docs it states:
Adds a Load More button at the bottom of the list. When the user
presses this button, the next page of data will be loaded into the
store and appended to the List.
But, here, the list item with load more button appears at the top of the list, not to the bottom.
See my code here:
Ext.define('MyApp.view.MyLIst', {
extend : 'Ext.dataview.List',
xtype : 'mylist',
id : 'myList' ,
requires : [Ext.data.Store','Ext.plugin.ListPaging'],
config : {
width : '100%',
height : '100%',
loadingText : 'Loading data...',
emptyText : 'No Members',
itemTpl : '<div class="mylisttitle">{title}</div>',
store : 'mylistStore',
plugins : [
{
xclass : 'Ext.plugin.ListPaging',
autoPaging : false,
loadNextPage: function() {
console.log('Load more button clicked');
// fire event here
}
}],
masked : false,
mode : 'SINGLE',
scrollable : {
direction : 'vertical',
directionLock : true
}
}
});
and see the result below:
Any idea how could I show the same button at the bottom of the list?
Thanks
EDIT: I had posted the issue in senchatouch forum to, still awaiting a solution, you can see it here

Kind of strange. Can you try removing these properties (width, height and scrollable) and adding "layout:fit" to the parent of this list.

If you have any custom css try disabling it. Or if you are able to reproduce the same issue in a fiddle it would be more easier to fix. Here is a work demo jsfiddle.net/blessenm/9ypwk
Ext.application({
launch: function () {
Ext.define('TweetStore', {
extend: 'Ext.data.Store',
config: {
fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
pageSize: 25,
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json',
pageParam: 'page',
limitParam: 'rpp',
extraParams: {
q: 'sencha'
},
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
Ext.define('MyApp.list.List', {
extend: 'Ext.List',
config: {
useSimpleItems: false,
variableHeights: true,
infinite: true,
disableSelection: true,
allowDeselect: false,
store: Ext.create('TweetStore'),
loadingText: 'Loading data...',
emptyText: 'No Members',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{text}</div>'),
masked: false,
mode: 'SINGLE',
scrollable: {
direction: 'vertical',
directionLock: true
}
}
});
Ext.define('MyApp.list.Container', {
extend: 'Ext.Container',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Load More Plugin',
}, {
xclass: 'MyApp.list.List',
flex: 1
}]
}
});
Ext.create('MyApp.list.Container');
}
});

Solved it:
I was missing this : infinite: true
Load more button now appears at the bottom .
Thanks #blessenm for the working Demo :-)

How to have the slide multiple screens in Sench touch

I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.
Here is my Ext.data.Store:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
Here is the list that I am using it in:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
And i am calling this list panel from my submit button handler which is:
var jobsList = new SearchJobsForm.jobsList();
The full code I have pasted on this link for better visibility:
http://pastebin.com/a05AcVWZ

Ok,
SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results.
In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.
First let's instantiate the jobsList
// It has the id ( id: 'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
then you should put all your inputs into a form (xtype : formpanel,
id: 'searchFormId')
And add the resultPanel just after the form
Here is the code
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form
// here it comes
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.

How to add itemtap

I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});

Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],

The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.