I have implemented grid filters in Extjs 3.4, but now I am migrating to extjs 4.1.
Can anyone show me how to implement grid filters in extjs 4.1?
(As a new user, I am unable to upload an image to show an example)
Please refer following link.
http://www.sencha.com/forum/showthread.php?150918-Grid-Header-Filters
Second option is filter in menu, and this is available in extjs 4.1 examples.
http://docs.sencha.com/extjs/4.1.3/#!/example/grid-filtering/grid-filter-local.html
Third option is filter row.
http://www.sencha.com/forum/showthread.php?128154-FilterRow-for-Ext-JS-4-Grids
One of these link will guide you to the right path.
Regards.
The best way is to define a column component.
Ext.define('Ext.ux.grid.MyColumn',{
extend: 'Ext.grid.column.Column',
alias: 'widget.mycolumn',
childEls: [
'headerEl', 'titleEl', 'filterEl', 'triggerEl', 'headerTextEl', 'filterTextEl'
],
renderTpl:
'change it , and make your own TPL',
initComponent: function () {
// change or declare new data if you want.
// me.callParent(arguments);
// I have modified lot. so, I skip initComponent of Ext.grid.column.column
me.superclass.superclass.initComponent.call(this); // directly call parents parent class.
}
});
USAGE :
columns: [
{
xtype: 'mycolumn',
itemId: 'sfsfsfsfsf', text: 'My filter column'
}
]
Related
I have a Rally grid that I'm creating using the Rally app builder. Standard grid using the defect model. One of the fields in the defect model is set to hidden in the field setup in the Rally Workspaces and Projects setup. I'd like to dynamically make the field visible in my grid so that it only appears on my grid and not on the defect page when entering a defect. Any ideas on how to do that? Thanks.
This was a pretty tricky one. The grid and board components are hard wired to not show data from hidden fields by default and unfortunately there are not any config properties exposed to turn this behavior off. Here's what I came up with:
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
text: 'Hidden Field', //set column header text
renderer: function(value, meta, record) {
//return the rendered field data
return record.get('c_HiddenField');
}
}
],
context: this.getContext(),
storeConfig: {
model: 'userstory',
fetch: ['c_HiddenField'] //need to explicitly fetch
}
});
Basically you include a column in your columnCfgs without a dataIndex specified. Set the text and renderer to work with your field.
You'll also need to manually fetch your field in the storeConfig since the grid won't understand how to do it otherwise.
If I have a standard Rally grid, I want to dynamically adjust row CSS based on some condition. Sencha docs suggest using getRowClass http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridView-method-getRowClass
If I attempt to implement this it is not working however i.e. like this:
grid = {
xtype:'rallygrid',
store:store,
showPagingToolbar: false,
features: [{
ftype:'grouping',
groupHeaderTpl: '{name}',
ftype: 'summary'
}],
viewConfig: {
getRowClass: function(record, rowIndex, rp, ds){
return 'x-grid-row-outofscope';
}
},
Is this possible with a Rally grid?
This is a bug in 2.0rc1/2 of the SDK that has since been fixed but not released yet.
Check out this similar question and corresponding answer:
Rally grid color rows based on model
I'm using Sencha Architect 2.1
I have an Store and a Container, but how can I render the data from the store using the container?
I created a 1 minute video explaining the problem:
http://www.youtube.com/watch?v=_HpR9h80D94
In other words this is what I want to do in Secha Designer 2:
data: ordersStoreId.getData(),
Compleate:
xtype: 'container',
title: 'MyContainer6',
iconCls: 'info',
data: ordersStoreId.getData(),
tpl: [
'Testing: {status}'
]
Any idea? Thanks! :)
So this looks like a bug. I guess one way to work around this issue is to add the show listener to your container and then you can dynamically pull in data from your store.
listeners: {
show: function(this, opts){
this.setData( Ext.getStore('yourStore').getData() );
}
}
So in Architect:
1) Select your container
2) In your config window add an Event Bindings by clicking the + icon and choose Basic Event Binding
3) Choose the event name show like I suggested. You will then be presented with an editable code view where you can put your code. ex:
this.setData( Ext.getStore('yourStore').getData() );
Hope this helps.
How can i change a xtype in Sencha Architect?
Example:
from:
xtype: 'list'
to
xtype: 'RefreshableList'
As a disclaimer, I am one of the lead engineers on the Sencha Architect product.
Drag out a List as a top level component. All top level components are their own classes. Set the userAlias and userClassName configurations to values like 'refreshablelist' and 'RefreshableList'. Take a look at the code generated for this.
Drag out a Panel as a top level component, drag the existing RefreshableList in the inspector into the new Panel. A prompt will ask you if you would like to Move, Copy or Link the list, choose "Link". This will create an instance of your subclass RefreshableList.
This is currently the best way of going about this task inside of Architect. In the case that you built your RefreshableList component outside of Architect and would like to link it in the process will be a little different. You will have to create an override and change the xtype you are instantiating there. We are attempting to address this limitation in Sencha Architect 2.2. You will be able to specify what we are currently calling a createAlias. This is what alias (xtype, ptype, type, etc) to create.
For example if you dragged out a Panel and then put a list inside of it, you could then select the list in the inspector and configure the createAlias to 'RefreshableList'. This will replace the xtype in the generated code from 'list' to 'RefreshableList'. It will NOT change what is rendered on the canvas inside of Architect. You would have to load your RefreshableList class via a JS Resource and/or the dynamic loader/requires functionality.
You have to create your own class by extending the list class and give it your own widget alias. This tutorial has all you need: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/
UPDATE
Here is some code for a very basic custom list
//this follows the MVC structure, if you wanted you could also do something like ux.RefreshableList
Ext.define('myAppName.view.RefreshableList', {
extend: 'Ext.dataview.List',
xtype: 'RefreshableList',
config: {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
},
initialize: function() {
this.callParent();
}
});
The code below is part of my controller function;
success: function (response) {
var text = response.responseText;
var result = Ext.decode(response.responseText);
var indexPanel = Ext.create('app.view.PersonDetails');
Ext.getCmp('mainView').push({
xtype:'person',
data: result
});
}
The code below, is the view, which i am passing values from my Controller function (above).
The code below, demonstrates hard coded data in that view (Hard coded text), but what i want to do is to display the data: result that i am passing from Controller function (above) to be displayed in the following view. How can i do this ?
Ext.define('app.view.UserInformation',{
extend:'Ext.Panel',
xtype:'person',
config: {
title:'Person details',
html:['Hard coded text'].join("")
}
});
UPDATE
The result contains several values like;
result.name, result.age. result.gender
I will be passing result to the other view.
1.) from the View, how can i add a button ? and wen the user clicks on that button how can i fetch the result.age field and do a if condition to check if the age is below 10 ?
2.) Imagine, if there's a field called, result.imageurl, how could i display the image on the other view (in a frame) ?
UPDATE2
Ext.getCmp('mainpanel').push({
title: 'Hello ' ,
xtype:'person'
});
Ext.getCmp('idOfTheView').setRecord(result.first_name);
Your question is Sencha Touch alone, not relevant to PhoneGap. :)
Suppose that your view has an id: view_id
Then in your controller function:
Ext.getCmp('view_id').setHtml(what you want to put into your view)
Updated answer:
Your question consists of several sub-questions. I'm afraid that the scope you're asking is too wide but I will answer the most important part.
(from my own application):
Ext.define('rs.view.ProductInfo', {
extend: 'Ext.Container',
xtype: 'ProductInfo',
id: 'product-info',
cls: 'product-info',
config: {
items: [
{
xtype: 'panel',
styleHtmlContent: true,
id: 'product-info-header',
tpl: [
'<div class="product-info-header">',
'<img src={image} width="100px" height="100px"/>',
'<h3>{name}</h3>',
'<h4>Price: {price}</h4>',
'<h4>Seller: {sellerUsername}</h4>',
'</div>',
],
},
],
}
});
Note that I defined a Model with attributes, {image},{name},{price},{sellerUsername}, then in the code snippet above, you can see that I use them in tpl config as if normal use in Ext.List (with store config). So how can I do it?
First, you have to define a model describing your result. obviously.
Second, define tpl in your view, I believe you can figure it out from the example above.
Finally, use this (assume that you've written the result received from server into your Model instance which I've mentioned in first step):
Ext.getCmp('your_view_id').setRecord(your_model_instance)
100% work warranty because I've used this many times. Hope it helps. Should you have any question, please leave a comment.