I want to make a grid data according to JSON response of a method means if i send JSON Array with 3 element its create column name three different name as well as 10 ,20 or more dynamically according to Array size.
Please help me or suggest me some example code.If its not feasible in extjs please suggest me to another
frame work .
Sorry for my poor english.
Thanks
Naresh
Extjs 3 solution
You can add metaData to the JSON response. Inside the metaData you can send a field-config. Listen to the metachange event and update you grid accordingly.
You can find an example here: Dynamic Grid (ExtJs 3)
Extjs 4+ solution
There is a user component Dynamic Grid Link
Ext.create('Ext.window.Window', {
width: 400,
height: 400,
title: 'Example of Dynamic Grid'
layout: 'fit',
items: [
{
// All what you have to set! :)
xtype: 'dynamicGrid',
url: '/some/url'
}
]
});
This should do exactly what you are looking for!
Related
I want to add additional column to grid dynamically on table instantiation.
So, I've added process function to gridPanel with following section
var clmn = {
xtype: 'checkcolumn',
dataIndex: 'test,
editor: {
xtype: 'checkboxfield'
}
};
config.columns.push(clmn);
As you can see, rowediting plugin is used here too.
Actually column is added and displayed on screen. But it is not hold correct data that has been loaded, only defaultValue from model.
On row modification (when rowediting plugin is started) real data is displayed.
What is the issue here? May be there is some refresh method that should be used to refresh metadata or sth like this..
Please, take into consideration that i am working via Sencha Architect
columns.push() is not proper way to do this. So you should use reconfigure method which is mentioned here. If your store is already have fields for new columns you don't have to pass it again. Just get your current columns and add your new columns and reconfigure the grid.
edit for answer : Your problem easer than before. you can just pass your columns to it like below;
var yourGenericColumns = [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'}];
yourGenericColumns.push({text : 'Age', dataIndex: 'age'});
Ext.create('YourApp.YourCustomGrid',{
columns : yourGenericColumns
});
I am using a single-cell grid to show notifications in my application. How do I show date and time of notification with each cell data? The data is present in the model of the associated store. I want it to be something like the phabricator https://secure.phabricator.com/
Any pointers how I may do so?
One way to accomplish this would be to use a templatecolumn. You can then specify a tpl in the config of html representing the two sources of data.
Here is a fiddle I created demonstrating and simple and more complex tpl that resembles the data on the site you referenced.
Here is a simple example of a template column:
{
xtype: 'templatecolumn',
header:'Name',
tpl:'{first_name} {last_name}'
}
And a more complex template column with similar style to the one you referenced:
{
xtype: 'templatecolumn',
header: 'Example With Date',
flex: 1,
tpl:'<span style="display:inline-table;width:50%;">{first_name}</span><span style="width: 50%;display: inline-table;text-align: right;">{myDate}</span>'
}
This appears on all of the columns in my grid:
Chrome 28.0.1500.72 m:
Firefox 21.0:
All of the columns in my table look something like this:
{
text: 'Audit Type',
width: 100,
sortable: true,
dataIndex: 'requestType'
},
I have no idea what's causing this. The javascript console shows no errors about missing images either.
Any help that could point me in the right direction would be greatly appreciated
More info
I'm using Chrome Version 28.0.1500.72 m and Extjs 4.2.1.883
My app is run on my own computer... so a local server. I'm using Play Framework with Scala on my backend.
Oh what silliness.
I did this earlier:
.x-panel {margin: 8em;}
This ended up moving the entire grid except for the menu shadows.
Giving the grid an id property in its definition and having this instead in my stylesheet solves the problem:
#grid {margin: 8em;}
I seem to be struggling with something I have used a million times! I dont understand why all of a sudden it doesnt work anymore :)
My Layout
an accordion
> toolbar
> tabs
>tab 1
> form.panel 1
> textfield (alias: 'widget.mytextfield')
> form.panel 2
>tab 2
> form.panel 1
Now heres the problem... when im at panel 1 and I try to access the textfield (mytextfield)
//panel, being 'tab 1 > panel 1'
var textfield = panel.down('mytextfield')
It just returns null.
My output for
console.info(panel.down());
is the header of the panel (so im def at the right location) -> it seems as if it cant find the body of the panel
Any ideas? Totally stuck!
The only way I get get 'mytextfield' is with
var textfield = panel.items.items[0];
But if the textfield changes order then the above code wouldnt work anymore of course
Thanks in advance!
UPDATE
Ok, I've figured something out... which is strange
If I take the textfield out of the panel and place it in a separate file. Then include it using requires. I can access the textfield with .down()
For example in my main form panel
...
requires:['App.view.MyTextField'],
items:[{
xtype:'mytextfield' //i can access you with .down()
},{
xtype:'textfield',
alias:'widget.mytextfield2' //you are showing up - but I CANT access you with .down() - only panel.items.items[0]
}]
...
MyTextField
Ext.define('App.view.MyTextField', {
extend:'Ext.form.field.Textfield',
alias:'widget.mytextfield'
});
Any ideas why?
How and where do you get your parent panel component?
http://jsfiddle.net/UBb8n/1/ — works for me.
UPDATED:
According to documentation:
alias:
List of short aliases for class names.
Most useful for defining xtypes for widgets.
So keep in mind that items: {xtype: 'blah'} != Ext.define('My.Class.Blah', {alias: 'widget.blah'}).
First it's just an instantiation of the second one.
And alias: 'widget.mycoolpanel' is just a shorthand for helper function Ext.widget that searches components with xtype: 'widget.<…>'.
Which have the means to derive a description of the field (such as text, combobox) of the table in front of the text input field?
Appearance that was:
ie a question mark next to the field - it points to a question mark - shows information on the field. When the mouse is a query to the database from there from a particular table to get a description of the field.
How best to implement it?
http://jsfiddle.net/akat/UgLN4/
(You will have to use an appropriate image and probably style it so that it looks 'better')
A pretty ugly but easy way to do this is just to include the HTML for the icon in the description.
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Status <img src="./questionmark.png" title="User status" />'
}]
})
It might be more elegant to look at writing a plugin for Ext.form.Field .