I'm fairly new to ExtJS. I adopted some examples and added the functionality to add tabs to a tab-control by clicking on some link. so far so good. Now I want to load a ExtJS table into on of the new tabs. the items (rows, columns) are defined in a database on the server side. Can you give me some hints how to add the table automatically when the tab is created?
Autoload is good for pulling an HTML table from your server-side code. Does this data ever get updated? If so you will need to reload the entire HTML. I would suggest using a grid instead:
// tabPanel definitinon
{
xtype:"grid",
//tabId is a unique value created at the time of the tab
id:"general_props_status_grid_" + tabId,
ds: C.createStore({
storeId:"general_props_status_grid_" + tabId,
autoLoad:true
proxy: new Ext.data.HttpProxy({
//path to a serverside page that gerenates a JSON table contents
url: '?fuseaction=qry_statuses'
}),
reader: new Ext.data.JsonReader({
id: 'status_id',
root:'data'
}, [
{name: 'status_id'},
{name: 'name'}
]),
remoteSort: false
}),
columns:[{
header: "Status ID",
dataIndex: 'status_id',
width:20,
hidden:true,
sortable:true
},{
header: "Name",
dataIndex: 'name',
hideable:false,
renderer:function(val){
return "<span class='link'>" + val +"</span>"
},
width:150,
sortable:true
}],
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
listeners: {
activate:function(thisGrid){
//this will reload the grid each time this tab is selected
thisGrid.getStore().reload();
}
}
}
There are a ton of options for grids, but the above example shows an automatically updating grid via callbacks.
ok, i did some further reading i thing tha autoLoad property is helping me a lot here.
i will go from here.
Related
I am trying to use this following code in my application to retain the current state of my application even after it is refreshed.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
But after executing above code, It's not working for me.
Kindly suggest any way to do this as, I am new to ExtJs
Thanks.
You need to define this in the Launch function of your application or init of controller. Its critical to use expires when using state provider.
init : function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires : new Date(Ext.Date.now() + (1000*60*60*24*90)) // 90 days
}));
}
Then based on what components state you are trying to save set its stateful property to true, alternatively giving it a stateId.
Below is example to save state of grid:
Ext.define('MyApp.view.Users', {
extend: 'Ext.grid.Panel',
alias: 'widget.users_grid',
title: 'Users',
stateful:true,
stateId:'users_grid_stid',
store:{
data:[
{
first_name:'Joe',
last_name:'Blogs'
}
]
},
columns: {
items: [
{
xtype: 'gridcolumn',
dataIndex: 'first_name',
text: 'First Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'last_name',
text: 'Last Name',
width: 200
}
]
}
});
You can test this by modifying the width of one of the columns on this grid and then that column will be hold the modified width when you next load the page, even after browser restart.
Check F12 Console -> Application Cookies for saved component states.
I'm having a problem trying to add a toolbar and paging to my grid that provide search results. I want to add that because some searches bring up hundreds of items so I want to separate them in different pages and only show 25 of them by page.
My problem is that while the toolbar is okay and the different pages are here, the results still show up all at once every page. Like for exemple if a search brings you 200 results, there will be 8 pages (like it should), but each pages would show you the 200 items instead of only 25. I followed strictly (i think) the senchadoc article on the subject, so if anybody could help me that would be appreciated.
Thanks in advance. Here's my code :
panelResult: function() {
var store = Ext.create('Ext.data.Store', {
id:'userBeaconList',
storeId:'userBeaconList',
autoLoad: false,
pageSize: 25,
fields:[//BLABLABLA],
data: //MyData,
proxy: {
type: 'memory',
reader: { type: 'json', root: 'items' }
}
});
// specify segment of data you want to load using params
store.load({
params:{
start:0,
limit: 25,
}
});
return Ext.create('Ext.grid.Panel', {
title: SarsatConf.listBeaconTitle,
margin : '10 0 0 0',
anchor: '100%' ,
store: store,
columns: [ //BLABLABLA],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
});
}
}
Your configuration seems OK. That's probably your server that is not respecting the limit and start params...
Another option would be to load the data from the server once, and put them into a memory proxy that will emulate paging on the client side.
I'm working with ExtJS 4.1, I need to create a combo box containing a list of customers and I'd like to set a specific pre-selected item in it, but I don't know how to do it.
Here's the code to create my combo box:
xtype: 'combobox',
fieldLabel: 'customer',
name: 'customer_id',
allowBlank:false,
afterLabelTextTpl: required,
//data store
store: Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'customer_model',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'load.php?item=customer',
reader: {
type: 'json',
successProperty: 'success',
root: 'data'
}
}
}),
valueField: 'id',
displayField: 'company',
typeAhead: true,
queryMode: 'remote',
emptyText: ''
As you can see my combo box is filled by a data store, that data store is built on a data model called 'customer_model'. Here's the code for data model:
Ext.define('customer_model', {
extend: 'Ext.data.Model',
fields: [
{type: 'int', name: 'id'},
{type: 'string', name: 'company'},
{type: 'string', name: 'vat'},
{type: 'string', name: 'ssn'},
{type: 'int', name: 'ref_id'}
]
});
Well, I'd like to configure my combo box so that a certain item, for instance the customer having id equals to 1, is automatically selected when the page is loaded.
Can anyone help me ?
Thanks in advance.
Enrico.
In Ext.js 3.2.1, you are able to do this:
combobox.setValue(id);
This assumes that the combobox is configured to use id as the valueField. Your code seems to indicate that this is the case. You would also need to have a reference to the id value that you want to set the value to. The caveat here is that you need to make sure that this code only executes after the model is loaded, otherwise the combobox won't have anything to display. You can ensure this by setting the combobox in the callback method of the ajax call or in the load event of the store.
I've looked into the documentation for Ext.js 4.1, and this method seems to still be there. I believe this should do the trick.
Edit: clarity
Thanks to Christopher help I wrote a working version of my code, I've decided to post it here, maybe it could be useful for someone...:
buttons: [{
text: 'Load',
handler: function(){
var form = this.up('form').getForm();
var combobox = form.findField('ref_id_combo');
formPanel.getForm().load({
url: <?php echo "'update_loader.php?id=".$_GET['id']."&item=customer',"; ?>
waitMsg: 'Loading...',
success: function(form, action) {
combobox.setValue(<?php echo get_property_id("ref_id","customer",$_GET['id']);?>);
}
});
}
}
Programatically with combo.setValue(val) or declaratively:
{
xtype: 'combo',
value: val,
...
}
if you want to select the first value of a store you can do
combo.select(combo.getStore().getAt(0))
it will select the value at index 0 of the combo store
If you create your own store first, you can use afterrender: function(combo){}
listeners: {
afterrender: function (combo) {
var record = yourStore.getAt(0);
var abbr= record.get('abbr');
combo.setValue(abbr);
}
}
I am having combobox with in window->form->combo, iam binding data from grid to combo using form.loadRecord(record).
My issue is:
After binding the data, i am trigger the combo to change the combo data ,For the first time combo expand little and hide automatically after second click only combo items loads correctly.
{
xtype: 'combobox',
editable: false,
id: 'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
store: Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['USERTYPE'],
proxy: {
type: 'ajax',
extraParams: {
typeName: 'USERTYPE'
},
url: 'USERTYPE.htm',
reader: {
type: 'json',
root: 'res'
}
},
listeners: {
load: function (store, options) {
var combo = Ext.getCmp('USERTYPECmbo');
combo.setValue(combo.getValue()); //Set the remote combo after the store loads.
}
}
}),
name: 'USERTYPE',
fieldLabel: 'USER TYPE'
}
point me where iam going wrong or any property need to be added for component.
Try to add
queryMode: 'local'
to your combobox properties
It's because valueField is not defined in your config object(while displayField is set). When extjs tries to load your combo he needs both value and display fields to display your combo correctly but in render time,your valueField is not yet set and he`s waiting for the ajax request sent to server and response is sent back.
In your listener you are setting the combo value while its not rendered yet.So when you click on your combo for the second time,exactly after remote JSON is loaded then combo fields are set.
{
xtype : 'combobox',
editable : false,
id:'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
valueField: 'USERTYPE',//set whatever field you like in your json
store :new Ext.data.Store({
autoLoad: true,
fields: [ 'USERTYPE' ],
proxy: {
type: 'ajax',
extraParams: {typeName : 'USERTYPE'},
url : 'USERTYPE.htm',
reader: {
type: 'json',
root : 'res'
}
}
}),
name : 'USERTYPE',
fieldLabel: 'USER TYPE'
}
Update:
One issue i didn't notice was that you created the store using Ext.create and because of that,extjs would try to Get your JSON twice(just check it using firebug) while one request would be enough.Just use new instead of Ext.create.I tested your code in my local server and its working correctly.if you still have the same issue please provide a download link to your form js + html + Store so i could review ur code.You may download my test files built on your code and working from here.tested on FF 6 and opera 10 and IE9
I have a combobox and a form window opening on the same page.
The combobox code is:
combo1 = new Ext.form.ComboBox({
fieldLabel: 'Intrested in',
hiddenName: 'interest',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'ajax.php',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
fields: [{
name: 'myId'
}, {
name: 'displayText'
}]
})
}),
valueField: 'myId',
displayField: 'displayText',
triggerAction: 'all',
emptyText: 'Select',
selectOnFocus: true,
editable: false
});
First time the list fetched from SQL table is loaded correctly.
On the same page there is a window with a short form submitting new values to sql database,
but after submitting it and opening the combobox, the list is not refreshed.
ONLY after submitting the form again I can see the previously added values.
Why doesn't the combobox reload automatically after the first submitting?
The problem here is, that the combobox internally caches the so called "last query" - if that doesn't change it does not reload its data from the store. So the solution is to reset this "last query" parameter:
combo1.lastQuery = null;