I'm using ExtJs 4. I have a grid, but i don't have a store or columns pre defined. I just don't know what grid should be showing. But i still nead to render grid using Json markup.
I want to do something like this:
//grid with empty store and no collumns
{
xtype: 'grid',
columns: [],
store: new ArrayStore([])
}
What is the easyest way to do this?
You can't load create a grid without any columns.. however you can create one without any data (just set store to autoload: false). For example..
{
xtype: 'grid',
//..other config here
store: new Ext.data.JsonStore({
url: 'store/url.php',
autoLoad: false
}),
cm: new Ext.grid.ColumnModel({
columns: [
{ dataIndex: 'id', header: ' ' }
]
})
}
Related
Im new at this sencha thingy and im trying to experiment a bit with it. I've been making some very simple tests and now i've reached the point where i want to pass the data from one file to another. To make it easier to understand im trying to get the data from the following text box to make a simple filter tool.
the textfield has been created in the following piece of code in the file Filters.js
Ext.define('Prj01Filtro.view.main.Filters', {
extend:'Ext.form.Panel',
xtype: 'Filters',
alias: 'form.formFilter',
requires: [
'Prj01Filtros.view.main.FilterController'
],
controller: 'controllerFilter',
items:[
{
margin: '0 0 10 0',
buttons: [
{
xtype: 'textfield',
fieldLabel: 'Filter',
name: 'textFieldSearch'
}, {
name: 'buttonSearch',
text: 'Buscar',
listeners: {
click: 'onClickFilter'
}
}, {
name: 'buttonRemoveFilter',
text: 'X',
listeners: {
click: 'onClickRemove'
}
}
]
}
]
The code of the buttons have been located in a file named FilterController.js
Ext.define('Prj01Filtros.view.main.FilterController',{
extend: 'Ext.app.ViewController',
alias: 'controller.controllerFilter',
onClickFilter: function() {
//Code to apply the filter
},
onClickRemove: function() {
//code to remove the filter
}
})
Finally the code of the table is located in a file named List.js
Ext.define('Prj01Filtros.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
plugins: 'gridfilters',
requires: [
'Prj01Filtros.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', align: 'left', filter: {
type: 'string'
}},
{ text: 'Email', dataIndex: 'email', flex: 1, align: 'left', filter: {
type: 'string'
}},
{ text: 'Phone', dataIndex: 'phone', flex: 1, align: 'left', filter: {
type: 'string'
}},
],
listeners: {
select: 'onItemSelected'
},
});
So my goal is to make a function in FilterController.js that can be called from Filters.js which sets the value for the filters applied in the columns of List.js but im kind of stuck on how to set the value property for the filter from the function that i have created. If someone knows how to do it i would appreciate the help. Thanks!
I've tried many things but since im new to sencha im pretty much sure that they were incorrect anyways.
I suggest to study View Models & Data Binding and ViewModel Internals sections of Ext JS documentation. These are among the most powerful features of Ext JS so it good to develop a deep understanding.
For you current question, you need to access the store behind your List view to manage the filters, not the list itself. Once you get the store, you can set / clear the filters with setFilters and clearFilter methods on the store:
store.setFilter([{
property: 'email',
value: '<search term here>',
operator: 'like'
}]);
store.clearFilter();
To easily access the store, define the store in the view model of a view that is above both List and Filters view. This is the important part because this way you can take advantage of inheriting the view model from the container parent. Let's say you have a panel which contains both List and Filters. Define the store in the view model:
stores: {
personnel: {
type: 'personnel'
}
}
Use bind config when assigning the store in your List:
Ext.define('Prj01Filtros.view.main.List', {
...
bind: {
store: '{personnel}'
}
...
});
After all this, you can access the store from the Filters view controller's methods:
onClickFilter: function() {
this.getViewModel().getStore('personnel').setFilters(...);
}
You need the get the value the user entered into the field. You can access it from the controller with querying the textfield component, but you can also do it with the view model.
I have one dynamic ExtJS grid.
items: {
xtype: 'grid',
border: false,
columnLines: true,
scrollable: true,
stripeRows: true,
columns: changeColumns,
store: store1 /// How to change store here
},
and store 1 is some thing like
store1 = Ext.create('Ext.data.Store', {
fields: Fields1,
data: Data1
});
and store 1 is some thing like
store2 = Ext.create('Ext.data.Store', {
fields: Fields1,
data: Data2
});
So I want to change my store on basis of some condition given below.
Now my condition is
if(headersXmlDoc.getAttribute("ST") == 1){
Store1
}else if(headersXmlDoc.getAttribute("ST") == 2){
Store2
}
Can any body tell me how to achive this.
You will need to use the grid's reconfigure method.
Example: https://fiddle.sencha.com/#view/editor&fiddle/1pdi
I've got an extjs global store have I have hard coded with fields and data:
Ext.define('Registration.store.SavedSessions',{
extend: 'Ext.data.Store',
storeId: 'savedsessions',
fields:[
"id",
"title",
"dateStart"
],
data: [
{
id: 1,
title: 'test',
dateStart: new Date()
}
]
});
The global store is registered via the Application.js file:
Ext.define('Registration.Application', {
extend: 'Ext.app.Application',
name: 'Registration',
stores: [
'SavedSessions'
],
...
I also have a grid that I'm trying to load the store into:
Ext.define("Registration.view.cart.savedsessions.SavedSessions",{
extend: "Ext.grid.Panel",
xtype: 'savedsessions',
store: Ext.data.StoreManager.lookup('savedsessions'),
columns:[
{
text: 'Date',
dataIndex: 'dateStart'
},
{
text: 'Title',
dataIndex: 'title',
flex: 1
}
]
});
Looking at the docs this all looks correct. The problem I'm running into is that the store doesn't load.
When I open up the javascript console and count the number of records in the grid's store I get 0:
I'm not sure how this can happen at all considering the data is hard coded into the store.
Also, when I grab the store directly from the javascript console I can get the hard coded data:
What am I missing here?
Why use the StoreManager to get the store? Just use the storeId:
store: 'savedsessions',
I am trying to create a multiselect list from json store, which is in this format
[{"photo_id":1,"file_name":"test.JPG","x":123,"y":456},{"photo_id":2,"file_name":"test2.JPG","x":321,"y":765}]
The multiselect list populates the rows but it doesn't show the file_name in the list
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: store // contains the json string
});
and here is the multiselect box
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
frame: true,
width: '100%',
items: [
{
anchor: '100%',
displayField: 'file_name',
valueField: 'photo_id',
store: storeVar ,
xtype: 'multiselect',
fieldLabel: 'Select an image',
allowBlank: false
}
]
})
Grigor, you can use Ext.JSON.decode to decode your string in json format:
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: Ext.JSON.decode(store) // contains the json
});
Here is demo
You are mixing the creation of the Store with the definition of a model: The line
extend: 'Ext.data.Model'
has no effects on a Store, check examples on documentation docs
I can't comment/edit on questions so I write it in a new answer.
I am trying to populate a grid using a DirectStore. No data appears in the grid although I can see data in Firebug. I even tried to dump the data in a DataView to see if i am maybe messing up in the GridPanel but nothing got displayed there either. Tried using both JSON and XML readers to no avail.
Any idea what might be going on here?
Here is the javascript:
var RecordDef = Ext.data.Record.create([
{name: 'ProgramName'}
]);
var jsonReader = new Ext.data.JsonReader({
root: 'list',
fields: [
{name: 'ProgramName', type: 'string'}
]
});
var xmlReader = new Ext.data.XmlReader({
record: "ProgramName"
}, RecordDef);
var mystore = new Ext.data.DirectStore({
autoLoad: true,
reader: jsonReader,
paramsAsHash: false,
storeId:'mystore',
directFn: DataAction.getProgramNames
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store: mystore,
columns: [
{id:'ProgramName', header: 'ProgramName', sortable: true, dataIndex: 'ProgramName'}
],
stripeRows: true,
autoExpandColumn: 'ProgramName',
fitToFrame: true,
fitContainer: true,
height: 200,
title: 'Coolness',
});
And this is the data I'm getting back as seen in Firebug:
{"result":
"{\"list\":
[{\"ProgramName\":\"Name1\"},
{\"ProgramName\":\"Name2\"},
{\"ProgramName\":\"Name3\"},
{\"ProgramName\":\"Name4\"}]}",
"tid":2,"action":"DataAction","method":"getProgramNames","type":"rpc"}
Your result value is a string, not an object named list that contains an array. It should look like this (note that the double-quotes around the entire "result" value have been removed):
{"result":
{\"list\":
[{\"ProgramName\":\"Name1\"},
{\"ProgramName\":\"Name2\"},
{\"ProgramName\":\"Name3\"},
{\"ProgramName\":\"Name4\"}]},
"tid":2,"action":"DataAction","method":"getProgramNames","type":"rpc"}
With that, you should not need to escape all of your double-quotes either.